Question

我正在进行3级导航，并希望使用切换来扩展和关闭这些级别。我得到它与第二级工作，但我正在努力与第三级。我希望在单击第二级（目的）时打开第三级（purpose1，purpose2）。

    <ul>
    <li class="dropdown"><a href="#">About Us</a>
        <ul>
            <li>Services</li>
            <li>History</li>
         </ul>
     </li>

    <li class="dropdown"><a href="#">Products</a>
        <ul class="products">
            <li>Series</li>
            <li>Purpose</li>

        </ul>
          <ul>
            <li>purpose1</li>
            <li>purpose2/li>
         </ul> 
    </li>
 </ul>

使用Javascript：

$('li.dropdown').click(function(){
 $('li.dropdown').not(this).find('ul').hide();
 $(this).find('ul').toggle();

});

$('ul.products').click(function() {
 $('ul.products').not(this).find('ul').hide();
 $(this).find('ul').toggle();

});

我创建了一个fiddle来说明问题。实际导航要复杂得多，但这应该可以完成。任何建议都非常感谢！

Answer 1

点击产品li正在传播到顶层，这导致关闭。

$('ul.products').click(function(e) {
   $('ul.products').not(this).find('ul').hide();
   $(this).find('ul').toggle();
   e.stopPropagation();
});

<ul>
    <li class="dropdown"><a href="#">About Us</a>
        <ul>
            <li>Services</li>
            <li>History</li>
         </ul>            
     </li>      
    <li class="dropdown"><a href="#">Products</a>
        <ul class="products">
            <li>Series
                <ul>
                    <li>Series123</li>
                    <li>Series456</li>
                 </ul>
            </li>
            <li>Purpose
                <ul>
                    <li>purpose1</li>
                    <li>purpose2</li>
                 </ul>
            </li>
        </ul>
    </li>   
 </ul>

Answer 2

你的HTML错了。如果要通过单击“目的”显示第三个lvl，它应该如下所示：

ExpanderView

然后只需在这个thrid lvl list parent中添加一个类，并添加jquery fucntion。

Answer 3

这是简化的工作版本，首先在ul

内移动第3级li

<ul>

  <li class="dropdown"><a href="#">About Us</a>
    <ul>
      <li>Services</li>
      <li>History</li>
    </ul>
  </li>

  <li class="dropdown"><a href="#">Products</a>
    <ul class="products">

      <li>Series
        <ul>
          <li>Series123</li>
          <li>Series456</li>
        </ul>
      </li>

      <li>Purpose</li>
    </ul>
  </li>

</ul>

这里是jQuery片段 -

$('li.dropdown a').click(function(){
    $('li.dropdown').not(this).find('ul').hide();
    $(this).parent('li').find('ul').toggle();

});

$('li.dropdown ul li').click(function() {
    $(this).find('ul').toggle();
});

检查工作fiddle

Javascript切换多个级别的菜单

3 个答案: