Bootstrap 3 adding a form to a dropdown menu

Tue, 06/03/2014 - 22:28 -- Arisen

First we stop the propagation if any part of the UL element is clicked.

  $(document).on('click', '.dropdown-menu-form', function (e)
  {
    e.stopPropagation();
  });

I've added the class dropdown-menu-form to the element in order to traverse the tree.

I added functions to close the menu if the form is submitted or if a close button that I added is clicked.

  $(document).on('click', '.dropdown-menu-form button', function (e)
  {
    closeDropDownForm(e);
  });

  $(document).on('click', '.dropdown-menu-form .close', function (e)
  {
    closeDropDownForm(e);
  });

  closeDropDownForm = function (event)
  {
    $(event.target).closest('.dropdown-menu-form').parent().removeClass('open');
  }

Full Script

(function ($)
{

  $(document).on('click', '.dropdown-menu-form', function (e)
  {
    e.stopPropagation();
  });

  $(document).on('click', '.dropdown-menu-form button', function (e)
  {
    closeDropDownForm(e);
  });

  $(document).on('click', '.dropdown-menu-form .close', function (e)
  {
    closeDropDownForm(e);
  });

  closeDropDownForm = function (event)
  {
    $(event.target).closest('.dropdown-menu-form').parent().removeClass('open');
  }

})(jQuery);