当用户在 adminlte 中打开第二个下拉菜单时如何关闭侧边栏菜单下拉菜单？

Question

您好，我正在为我的网站使用 adminlte。我想要做的是在打开下拉菜单并且用户想要打开第二个下拉菜单时在侧边栏中自动关闭第一个下拉菜单。

例如，如果打开产品下拉菜单，然后我想查看该产品的客户类型，如果我点击销售下拉菜单，则应该关闭产品下拉菜单。

<aside class="main-sidebar sidebar-light-primary elevation-4">
  <!-- Brand Logo -->
  <a href="#" class="brand-link bg-dark">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
      style="opacity: .8">
    <span class="brand-text font-weight-light">AdminLTE 3</span>
  </a>

  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Sidebar user panel (optional) -->
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image">
        <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
      </div>
      <div class="info">
        <a href="#" class="d-block">Alexander Pierce</a>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul id="main-side" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
        data-accordion="false">
        <!-- Add icons to the links using the .nav-icon class
           with font-awesome or any other icon font library -->


        <li class="nav-item has-treeview ">
          <a href="#" class="nav-link ">
            <i class="nav-icon fas fa-shopping-cart"></i>
            <p>
              Products
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <div class=" p-2">
              <div class="form-inline  input-group input-group-sm">
                <input class="form-control form-control-navbar" name="" id="" type="search" placeholder="Search"
                  aria-label="">

              </div>

              <div class="custom-control custom-checkbox mt-1 ml-1">
                <input class="custom-control-input " type="checkbox" name="" id="" value="">
                <label class="custom-control-label " for="">Select All</label>
              </div>
            </div>
            <div style="height: 150px;" class="overflow-auto">
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Mango</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Grapes</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Apple</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Oranges</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Banana</label>
                </p>
                </a>
              </li>
            </div>
          </ul>
        </li>
        <!-- Products End -->
        <!-- Customer Type Starts -->
        <li class="nav-item has-treeview">
          <a href="#" class="nav-link ">
            <i class="nav-icon fas fa-store-alt"></i>
            <p>
              Customer Types
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <div class=" p-2">

              <div class="custom-control custom-checkbox mt-1 ml-1">
                <input class="custom-control-input " type="checkbox" name="" id="" value="">
                <label class="custom-control-label " for="">Select All</label>
              </div>
            </div>
            <div>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Large Retail</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Modern Trade</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Whole Sale</label>
                </p>
                </a>
              </li>
              <li class="nav-item pl-5">
                <p class="custom-control custom-checkbox">
                  <input type="checkbox" class="custom-control-input" id="" value="">
                  <label for="" class="custom-control-label ">Small Retail</label>
                </p>
                </a>
              </li>
            </div>
          </ul>
        </li>


      </ul>
    </nav>
    <!-- /.sidebar-menu -->
  </div>
  <!-- /.sidebar -->
</aside>

到目前为止，我已经尝试过这段代码。

$('.has-treeview').click(function(){
  if($(this).hasClass('menu-open')){
    $(this).removeClass('menu-open');
  }
  else{
    $(this).addClass('menu-open');
  }
})

Answer 1

<ul id="main-side" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

只需删除 data-accordion = "false"

Answer 2

通过大量的谷歌和代码实验，我得到了我想要的东西。

    $('#main-side .has-treeview').click(function(){
    $(this).siblings('.menu-open').removeClass('menu-open').children('.nav-treeview').slideToggle();
  })