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的使用技巧在其中，希望自己能记住

相关推荐：

HTML中表格是如何操作制成的？（代码示例）

HTML对象：html一些对象属性的介绍

以上就是html 和css 和js结合实现折叠菜单的代码的详细内容，更多内容请关注技术你好其它相关文章！