jquery - 当用户在 adminlte 中打开第二个下拉菜单时,如何关闭侧边栏菜单下拉菜单?
问题描述
嗨,我正在为我的网站使用 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');
}
})
解决方案
<ul id="main-side" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
只需删除 data-accordion = "false"
推荐阅读
- windows - 将所有txt文件合并到一个文件夹中
- react-native - 反应原生 onpressin 和 onpressout
- c - 如何使我的代码在一行上输入数字,并在其间用空格分隔,并输出非重复数字的平均值?
- excel - 取消保存对话框时退出每个循环
- python - 无法从 Django Rest 框架应用程序发送电子邮件
- wpf - 列表视图中的 wpf ComboBox 绑定
- django - Django:如何将每个图形放在页面上而不保存它
- java - 无法在 MacBook Pro 上的 Safari 浏览器中单击下拉菜单
- react-native - 如何使用底部标签导航处理 SafeArea 的背景颜色?
- android - 将 JSON 传递到 Firebase 动态链接