Steven Senkus

Software Developer living in 🌞 sunny, 🌞 sunny San Diego

jQuery Dropdown Login Menu with One-Shot Collapse

One-shot event handlers are a very useful tool to have in your Javascript/jQuery toolbelt.

In this post, we will see how to effectively add a bit of UI interactivity into our pages and applications using one-Shot event handlers to create a jQuery dropdown login menu.

Program Flow:

  • Anonymously invoke a Menu constructor function
  • Attach event handlers for #trigger button & the hidden

    , setting an initial state for the drop-down form

    • EVENTS:

    • click #trigger button:

      • Open the menu and reveal the login form
      • Attach a document event listener (the one-shot)
    • submit login form:

      • Validate input fields
      • Make an AJAX POST request
      • Close login form
    • ONE SHOT – click any in the document other than inside #innerContainer:

      • Close login form
      • Remove document event listener (the one-shot has been shot)