本篇文章给大家带来的内容是关于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一些对象属性的介绍
