Question

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

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

Answer 1

试试这个。

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

不知道.sublist是否是ul。

Answer 2

尝试类似

的内容

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

Answer 3

我建议：

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

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

Answer 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");
    }                       
});

jQuery下拉菜单

4 个答案: