1、这里的菜单不仅仅是菜单栏,也可以是文章模块等。
2、主要实现的效果:点击其中一个,关闭或展开自己,关闭其他已展开的菜单
3、优点:js代码量少,实现易于理解
废话不多说,看代码
HTML示例 (菜单代码,便于复制,就不加行号了)
<li class="nav-parent"> <a href="#"><span>系统设置</span></a> <ul class="children"> <li><a href="#">邮件配置</a></li> <li><a href="#">文件存储配置</a></li> <li><a href="#">选项</a></li> </ul> </li> <li class="nav-parent"> <a href="#"><span>系统设置</span></a> <ul class="children"> <li><a href="#">邮件配置</a></li> <li><a href="#">文件存储配置</a></li> <li><a href="#">选项</a></li> </ul> </li> <li class="nav-parent"> <a href="#"><span>系统设置</span></a> <ul class="children"> <li><a href="#">邮件配置</a></li> <li><a href="#">文件存储配置</a></li> <li><a href="#">选项</a></li> </ul> </li>
JS示例 (这里是用jquery实现的,代码行数少)
var $container = $('.children'), $trigger = $('.nav-parent'); // 分别获取所有的“父子” $container.hide();// 隐藏所有的“子” $trigger.first().find('.children').show();// 显示第一个“父”的子(展开第一个) $trigger.on('click', function(e) {// 当“父”发生点击事件 if( $(this).find('.children').is(':hidden') ) { $trigger.find('.children').hide(300);// 关闭其他 $(this).find('.children').show(300);// 显示自己 } e.preventDefault(); });
同样的原理,也可以把“find()”改成“next()”,实现对兄弟节点的控制,这里主要是体现在文字块、图片块的展示上面