左侧是收缩菜单栏,需要点击菜单栏以外的地方,左侧菜单栏全部收缩。如图
这个主要是看对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>