今天小编给大家分享的是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、css和js组合实现折叠菜单的代码就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
