多级菜单栏展开隐藏动画

Posted 2021-01-27 littleboyck

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