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 <form>, 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)