本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于html 和css 和js结合实现折叠菜单的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
1. 套用模板,将菜单的相关信息直接放在脚本数据中,使用循环生成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < 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的方式来实现菜单的折叠和展开
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(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与Html5的区别是什么
Html align属性是什么含义?Html中的align属性设置方法介绍
Html的特殊字符-css3 content:"特殊符号"应该如何使用
Html如何调用外部css
利用gulp实现压缩的实例
实现在Html页面加载完毕后运行js方法
Html怎么添加css样式?
Html表单怎么插图
Html怎么用link引入css
Html如何设置一个按钮
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html 和css 和js结合实现折叠菜单的代码