Question

我正在尝试使用CSS实现世界上最简单的Dropdown，并希望使用jQuery为它设置一些动画。但是jQuery中的“悬停”功能使得下拉列表一旦离开触发器元素就会消失（ul＃menu li a），因此您无法从下拉列表中选择任何内容。

您可以在此处查看代码和相关问题： http://jsfiddle.net/Xx2Z7/

我正在尝试所有内容并在网上搜索，但发现其他许多人都遇到了这个问题，但没有一个解决方案适合我，我正在寻找最简单，最清晰的代码。

感谢。

Answer 1

这是：

基本上，我改变了你的js事件，现在只能通过你的li元素的mouseenter和mouseleave来控制动画。 li包含子菜单，因此即使您离开链接所在的区域，子菜单仍将保持可见。

$(document).ready(function() {

  // Menus
  $('ul.menu').hide();

  $('ul#main-nav li').mouseenter(function() {
      $('ul.menu', this).animate({opacity: 'show'}, 'slow');
  });

  $('ul#main-nav li').mouseleave(function() {
       $('ul.menu', this).animate({opacity: 'hide'}, 'fast');
  });

});

Answer 2

你快到了。由于您的子菜单是li的子项，因此您只需要检测鼠标悬停在li上而不是锚点（将鼠标移到li个孩子计数为鼠标{{1} }本身）：

li

http://jsfiddle.net/Xx2Z7/3/

Answer 3

您在<a>上触发了悬停，因此当鼠标移出<a>时，hide（）会触发。

$(document).ready(function() {

    // Menus
    $('ul.menu').hide();

    $('ul#main-nav li').hover(function() {
        $(this).find('ul.menu').animate({opacity: 'show'}, 'slow');
    }, function() {
        $(this).find('ul.menu').animate({opacity: 'hide'}, 'fast');
    });

    $('ul.menu').mouseenter(function() {
        $(this).show();
    });

    $('ul.menu').mouseleave(function() {
        $(this).hide();
    });

});

当mouseout时，jQuery Dropdown菜单会消失

3 个答案: