当用户在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">

只需删除数据手风琴="false">

Answer 2

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

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