JQuery .hover slideDown slideUp работает, но, не работает

Question

Я использую bootstrap 3, и у меня есть выпадающее меню. Вместо использования анимации по умолчанию я использовал JQuery slideDown и slideUp. Единственная проблема, с которой я столкнулся, - это когда я нахожу, что она работает нормально, но когда я нажимаю меню, она отображается правильно, а slidesDown работает, второй клик затем slideUP работает, затем на третьем щелчке, чтобы проверить, будет ли работать снова, ответа нет. Я видел много примеров и разных методов, но я новичок и не имел большой удачи.

Соответствующий код, который работает:

$(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'); 
    }); 
}); 

Соответствующий код, который does't работы:

$(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'); 
    }); 
}); 

В конце концов, я хотел бы добавить $('#target').on('click hover', function() { поэтому, если пользователь наводит курсор на меню и случайно кликов, он закрывает меню, и они могут снова открываться, снова или снова нависая над ним или щелкая на нем.

Я не уверен, как удалить функцию наведения при нажатии.

Answer 1

Метод click() принимает в качестве аргумента только один параметр. Вы можете использовать slideToggle() и 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 принимает две функции как параметры: (http://api.jquery.com/hover/)

jQuery.hover(onHoverIn, onHoverOut); 

Нажмите занимает одно. (http://api.jquery.com/click/)

Вы должны были бы сделать что-то вроде:

$(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'); 
     } 
    }); 
});