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

无效的相关代码：

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

JQuery .hover slideDown slideUp工作但是，点击不工作

2 个答案: