Question

我正在尝试使用jquery手风琴样式菜单简化导航树。在其他帖子的帮助下，我觉得我错过了一些简单的东西。得到的是，一个类别有第二个子列表。我无法正确打开。关闭。我这里的示例代码只是不扩展“T1 sub b”项。我错过了什么？

HTML：

    <ul class='menu'>
  <li>Tier1</li>
  <ul>
     <li>T1 sub a</li>
     <li>T1 sub b</li>
         <ul>
           <li>T1 sub i</li>
         </ul> 
  </ul>
  <li>Tier 2</li>
  <ul>
      <li>T2 sub a</li>
      <li>T2 sub a</li>
      <li>T2 sub a</li>
  </ul>
</ul>

Jquery的

$(document).ready(function(){
$('ul.menu ul').hide();
$('ul.menu>li').click(function(){
    $(this).next('ul').slideToggle();

});

}）;

Answer 1

$(document).ready(function(){
    $('ul.menu ul').hide();
    $('ul.menu li').click(function(){
        $(this).next('ul').slideToggle();

    });
});

我已经这样做了，看起来工作得很好。

Answer 2

您只是将点击事件应用于ul.menu的直接子项，一个简单的解决方案是将您的选择器更改为ul.menu li而不是ul.menu>li

$(document).ready(function(){
    $('ul.menu ul').hide();
    $('ul.menu li').click(function(){
        $(this).next('ul').slideToggle();

    });
});

带有jquery的简单多层手风琴列表

2 个答案: