左侧收缩菜单,点击菜单外任意地方菜单收缩


左侧是收缩菜单栏,需要点击菜单栏以外的地方,左侧菜单栏全部收缩。如图

这个主要是看对jquery方法掌握的怎么样了,其实不难,重要的是使用jquery中not()方法,实现方法如下(只是一个简单的实现):

<ul class="bor">
  <li>
    <h3>第一个tab</h3>
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  </li>
  <li>
    <h3>第二个tab</h3>
    <ul>
      <li>22</li>
      <li>22</li>
      <li>22</li>
    </ul>
  </li>
  <li>
    <h3>第三个tab</h3>
    <ul>
      <li>11</li>
      <li>11</li>
      <li>11</li>
    </ul>
  </li>
</ul>

js:

<script>
  $('.bor').click(function(e){
    e.stopPropagation();
  });
  $(".bor h3").on("click",function(e){
    e.stopPropagation();
    $(this).siblings().toggle();
  });
  $('body').not('.bor').click(function(){
    $('.bor ul').hide();
  });
</script>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM