导航关闭和隐藏

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

毕业论文互助QQ群: 237401711
定制讲解加:QQ号: 2719046892 (微信同Q号)

Leave a Reply

邮箱地址不会被公开。