Javascript 三级折叠菜单

Question

我完全是个编程爱好者；我想要一个三级可折叠菜单，单击时会展开。我找到了一些可用的现有代码，但它仅适用于两级菜单。我无法弄清楚如何更改脚本，以便在单击时也打开第三个级别。任何想法都会受到 most 的赞赏！

这是现有的脚本：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> -->
<!--[if lt IE 9]>
  <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


  <script>
  $(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }

    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});
</script>

Answer 1

与现有代码相比，您可以使用相对较少的代码实现相同的结果。

使用 css 来处理显示可以说更容易管理，javascript 只需切换一个 class，您就可以在 css 中定位。这也意味着您可以拥有任意多的关卡。

它通过使用 css +

中的下一个兄弟选择器来工作

$('.menu-trigger').click(function(){
  $(this).toggleClass('active')
  
  // if you really wish to keep the jquery animation you can do this
  // $(this).next('ul').slideToggle()
})

/* you can use the sibling selector '+' to target the list */
.menu-trigger + ul {
  display: none;
}

.menu-trigger.active + ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="menu-trigger">parent</a>
    <ul>
      <li>
        <a class="menu-trigger">child</a>
        <ul>
          <li>
            <a class="menu-trigger">grandchild</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

这是我写的，它很简单，但有点说明了你想要实现的目标。

$('li').hover(function(){
    $(this).children('ul:eq(0)').show();
}, function(){
    $(this).children('ul:eq(0)').hide();
});

http://codepen.io/clarenswd/pen/GjBaWp

Javascript 三级折叠菜单

Javascript three-level collapsible menu

javascript

collapsable

expandable

multi-level