菜单展开关闭（点击一个，关闭其他）

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()”，实现对兄弟节点的控制，这里主要是体现在文字块、图片块的展示上面

 

转载于:https://www.cnblogs.com/cytyk/p/6019666.html