导航关闭和隐藏

<li class="nav-parent">
     <a href="#"><span>导航1</span></a>
     <ul class="children">
          <li><a href="#">导航11</a></li>
          <li><a href="#">导航11</a></li>
         <li><a href="#">导航11</a></li>
     </ul>
</li>
<li class="nav-parent">
     <a href="#"><span>导航2</span></a>
     <ul class="children">
          <li><a href="#">导航2</a></li>
          <li><a href="#">导航2</a></li>
         <li><a href="#">导航2</a></li>
     </ul>
</li>
<li class="nav-parent">
     <a href="#"><span>导航3</span></a>
     <ul class="children">
           <li><a href="#">导航3</a></li>
 <li><a href="#">导航3</a></li> 
<li><a href="#">导航3</a></li> 
<li><a href="#">导航3</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()”，实现对兄弟节点的控制，这里主要是体现在文字块、图片块的展示上面