jQuery .hover slideDown slideUp正常，但是单击不正常

Question

I am using bootstrap 3 and I have a dropdown menu. Instead of using the default animation I have used a JQuery slideDown and slideUp . Only issue I am having is when I hover it works fine but when I click the menu it displays properly and slidesDown works, second click then slideUP works, then on the third click to check if will work again, there is no response. I have seen many examples and different methods but I am a novice and haven't had much luck.

Relevant Code that works:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
      $(this).addClass('open');
   }, function () {
      $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
      $(this).removeClass('open');
   }); 
});

Relevant Code that does't work:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
      $(this).addClass('open');
   }, function () {
      $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
      $(this).removeClass('open');
   }); 
});

In the end I would like to add $('#target').on('click hover', function () { so if the user hovers over the menu and accidentally clicks, it closes the menu and they can reopen by either hovering over it again or clicking it open.

I'm not sure how to remove the hover function when clicking.

Answer 1

The click() method takes only one parameter as its argument. You can use slideToggle() and toggleClass()

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      $('ul.dropdown-menu', this).stop(true, true).slideToggle('fast');
      $(this).toggleClass('open');
   }); 
});

Answer 2

Hover takes two functions as parameters: ( http://api.jquery.com/hover/ )

jQuery.hover(onHoverIn, onHoverOut); 

Click only takes one. ( http://api.jquery.com/click/ )

You would need to do something like:

$(document).ready(function () {
   $('.navbar-default .navbar-nav > li.dropdown').click(function () {
      if ($(this).hasClass('open')) {
         $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
         $(this).removeClass('open');
      } else {
         $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
         $(this).addClass('open');
      }
   }); 
});