html 和css 和js结合实现折叠菜单的代码
程序员文章站
2022-03-28 08:22:28
...
本篇文章给大家带来的内容是关于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结合实现折叠菜单的代码的详细内容,更多请关注其它相关文章!
推荐阅读
-
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
-
HTML5+JS+CSS简单的实现左滑出现删除菜单,类似微信删除聊天框,代码完整
-
2020-07-11 html的rtl网站的适配 + css的pt单位应用 + JS的实现撤销和重做 + 位 字节 字符的区别
-
jquery中如何实现菜单的展开和折叠(代码)
-
jquery中如何实现菜单的展开和折叠(代码)
-
使用ul和li实现的带有边框的方格效果代码_html/css_WEB-ITnose
-
HTML和CSS3中的2D、3D结合实现动画效果
-
JS和CSS实现渐变背景特效的代码
-
分享HTML和CSS实现的炫酷登录页面代码
-
html与CSS如何实现圆形和圆角图片格式的示例代码