多級選單欄展開隱藏動畫
<div class="tab-pane" id="deviceControl">
裝置控制面板
<ul class="list-unstyled">
<li>
<i class="fa fa-tv" style="margin-right: 10px;"></i><a href="#">選單1</a>
<ul class="list-unstyled">
<li style="padding-left: 40px;"><a href="#">選單1.1</a></li>
<li style="padding-left: 40px;"><a href="#">選單1.2</a>
<ul class="list-unstyled">
<li style="padding-left: 15px;"><a href="#">選單1.2.1</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.2.2</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.2.3</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.2.4</a></li>
</ul>
</li>
<li style="padding-left: 40px;"><a href="#">選單1.3</a>
<ul class="list-unstyled">
<li style="padding-left: 15px;"><a href="#">選單1.3.1</a>
<ul class="list-unstyled">
<li style="padding-left: 15px;"><a href="#">選單1.3.1.1</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.2</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.3</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.4</a></li>
</ul>
</li>
<li style="padding-left: 15px;"><a href="#">選單1.3.2</a>
<ul class="list-unstyled">
<li style="padding-left: 15px;"><a href="#">選單1.3.1.1</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.2</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.3</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.1.4</a></li>
</ul>
</li>
<li style="padding-left: 15px;"><a href="#">選單1.3.3</a></li>
<li style="padding-left: 15px;"><a href="#">選單1.3.4</a></li>
</ul>
</li>
<li style="padding-left: 40px;"><a href="#">選單1.4</a></li>
</ul>
</li>
<li>
<i class="fa fa-tv" style="margin-right: 10px;"></i><a href="#">選單2</a>
<ul class="list-unstyled">
<li style="padding-left: 40px;;"><a href="#">選單2.1</a></li>
<li style="padding-left: 40px;;"><a href="#">選單2.2</a></li>
<li style="padding-left: 40px;;"><a href="#">選單2.3</a></li>
<li style="padding-left: 40px;;"><a href="#">選單2.4</a></li>
</ul>
</li>
<li><i class="fa fa-tv" style="margin-right: 10px;"></i><a href="#">選單3</a></li>
<li><i class="fa fa-tv" style="margin-right: 10px;"></i><a href="#">選單4</a></li>
</ul>
</div>
/*選項卡面板子選單展開動畫*/ optionCarSubmenuAnimation:function(){ var This = this; $('#line,#deviceControl,#sysManage').find('li a').click(function(){//不能是li 如果點選的是裡面的li,外面的li也被會被點選 var $this = $(this); var$thisParent = $this.parent().has('ul'); if($thisParent.length>0){ if(!$this.next('ul').is(':visible')){//$(this).next().css('display') == 'none' $this.next('ul').slideDown(200); $this.closest('li').siblings().has('ul').find('ul').slideUp(200); }else{ $this.next('ul').slideUp(200); //或者$thisParent.find('ul').slideUp(200); } } return false; }); },