Question

我是jquery的新手，到目前为止我已经有了我的代码来切换和滑动html菜单。继承我的代码

<script type="text/javascript">
$(document).ready(function () {
    $('li').each(function(){
$('li.menuheader').hover(function(){
    $('ul.submenu').slideToggle('slow', function(){})
});
}); 

});
</script>
</head>
<body>
<div id="navbar">
  <ul>


    <li class="menuheader">test1
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


    <li class="menuheader">test2
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


    <li class="menuheader">test3
      <ul class="submenu">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
      </ul>
    </li>


  </ul>
</div>

</body>
</html>

每当鼠标悬停在菜单标题上时，我的jquery下拉每个菜单。我需要将这些分开，而不使用div id并制作单独的jquery函数。任何人都可以帮我解决这个问题吗？

Answer 1

也许这就是你要找的东西（我认为需要使用slideToggle）：

$('ul.submenu').hide();
$('li').each(function() {
    $('li.menuheader').hover(function() {
        $(this).find('ul.submenu').show('slow')
    }, function() {
        $(this).find('ul.submenu').hide('slow')
    });
});

在这里摆弄：http://jsfiddle.net/DRjPF/

Answer 2

您的代码会显示所有ul.submenu，因为它们都与选择器匹配。使用$(this).find('ul.submenu')为每个li找到合适的。{/ p>

其次，对于每个li，您为每个hover绑定一个li.menuheader处理程序。这是不必要的。

此外，hover会在mouseenter和mouseout处触发。 mouseenter就足够了，

$(document).ready(function () {
    $('li.menuheader').mouseenter(function() {
        $('ul.submenu').not(this).slideUp('slow'); // hide all
        $(this).find('ul.submenu').slideDown('slow'); // 
    });
});

http://jsfiddle.net/zRvLt/

Answer 3

$('li.menuheader') ==＆gt;这将选择所有menuheaders。使用this过滤它们。

$(document).ready(function () {
    $('li').each(function(){
        $(this).('menuheader').hover(function(){
            $(this).children('ul.submenu').slideToggle('slow', function(){
                ....
            })
        });
    }); 
});

jquery nav bar slidetoggle问题

3 个答案: