<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;});},

?

轉載于:https://www.cnblogs.com/littleboyck/p/10121528.html

總結

以上是生活随笔為你收集整理的多级菜单栏展开隐藏动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。