菜單展開關閉（點擊一個，關閉其他）

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()”，實現對兄弟節點的控制，這里主要是體現在文字塊、圖片塊的展示上面