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