html 和css 和js联合实现折叠菜单的代码
发布时间:09/01 来源:未知 浏览:
关键词:
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(); } } // 监听1级菜单完毕
这里面也有一些css的使用技巧在其中,但愿本人能记住
相关引荐:
HTML中表格是怎样操纵制成的?(代码示例)
HTML对象:html一些对象属性的介绍
以上就是html 和css 和js结合实现折叠菜单的代码的具体内容,更多请关注百分百源码网其它相关文章!