html和css和js结合实现折叠菜单的代码

1. 套用模板，将菜单的相关信息直接放在脚本数据中，使用循环生成

<script id="templateNavBar" type="text/html">
 <p class="nav-bar-logo">

 </p>
 {{each $data as item i}}
 <p class="nav-item {{item.class}}">{{item.name}}</p>
 {{if item.child != null}}
 <p class="childgroup">
 {{each item.child as child i}}
 <p class="nav-item {{child.class}} child">{{child.name}}</p>
 {{/each}}
 </p>
 {{/if}}
 {{/each}}
</script>

2.在js中通过添加类open的方式来实现菜单的折叠和展开

 $(document).on('click','.nav-item:not(.child)',function () {
 console.log("choosing");
 var that = $(this);
 var next =that.next();
 if(next.hasClass('childgroup')){
 if (that.hasClass('open'))
 {
 // 收起当前菜单项
 that.removeClass('open');
 next.slideUp();
 }
 else{
 // 将其他打开的菜单项收起来
 if($('.nav-item:not(.child).open').next().hasClass('childgroup'))
 {
 $('.nav-item:not(.child).open').next().slideUp();
 $('.nav-item:not(.child).open').removeClass('open');
 }
 // 激活当前菜单项
 that.addClass('open');
 next.slideDown();
 }
 }
 // 监听一级菜单结束

这里面也有一些css的使用技巧在其中，希望自己能记住