jQuery 下拉菜单答案

【问题标题】：jQuery dropdown menujQuery 下拉菜单
【发布时间】：2016-04-26 22:42:40
【问题描述】：

我有一个导航栏，一个带有菜单 ID 的 ul，我想把它变成一个下拉菜单。每个 li 中都有 ul，每个 ul 都有类子列表，在 CSS 中显示值为 none，但是下面的 jQuery 即使我将鼠标悬停在它上面，ul 也不会显示。我今年 12 岁，这是什么？

        $(document).ready(function(){
            $('#menu li').hover(function(){
                $('.sublist').slideDown(200);
            });
        });

【问题讨论】：

您使用 jQuery 而不是 CSS 是否有理由这样做（诚然，我意识到 IE 6 不尊重 :hover 伪元素，除了 a 元素）？
以上评论：CSS method, jQuery method.

标签： jquery

【解决方案1】：

试试这个。

$('#menu li').hover(function() {
  $(this).find('ul').stop(true, true).slideDown(200);
}, function() {
  $(this).find('ul').stop(true, true).slideUp(400);
});

不知道 .sublist 是否为 ul。

【讨论】：

我建议向hover() 添加第二个函数，以解决mouseout()（或mouseleave()）事件。
我知道我迟到了，但你应该在 .slideDown(); 方法之前添加 .stop(true, true) 以停止冒泡。像这样：function(){$(this).find("ul").stop(true, true).slideDown(200);}
@Ricardo 两年前，jQuery 很酷。我已经编辑了，谢谢。

【解决方案2】：

试试类似的东西

$(document).ready(function(){
    $('#menu li').hover(function(){
        $(this).find('ul.sublist').slideDown(200);
    },
    function(){
        $(this).find('ul.sublist').slideUp(200);
    });
});

【讨论】：

【解决方案3】：

我建议：

$(document).ready(
  function(){
    $('li').has('ul').hover(
      function(){
        $(this).find('ul').show();
      },
      function(){
        $(this).find('ul').hide();
      });
  });

使用has()（尽管您可以改为使用:has() 伪选择器）来识别具有子ul 元素的li 元素。

【讨论】：

【解决方案4】：

使用下面的代码：

// Dropdown toggle fuction
$('.dropdown-toggle').click(function(){
  $(this).next('.dropdown').slideToggle("fast");
});
//Hide dropdown on page click
$(document).on('click', function (e) {
    if(!$(".dropdown-toggle").is(e.target) && !$(".dropdown-toggle").has(e.target).length){
        $('.dropdown').slideUp("fast");
    }                       
});

【讨论】：