当单击另一个菜单项时,如何关闭其他下拉菜单?现在,所有菜单项都一一打开,并且只能再次单击该菜单项才能将其关闭。 任何帮助将不胜感激。我不知道可以使用什么JavaScript代码来解决问题。
导航条码如下:
<nav class="mt-2" >
<ul 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">
<router-link to="/dashboard" class="nav-link">
<i class="nav-icon fas fa-th cyan"></i>
<p>
Dashboard
</p>
</router-link>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-building green"></i>
<p>
Company
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/company" class="nav-link" >
<i class="nav-icon fas fa-building "></i>
<p>
Add-Companies
</p>
</router-link>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-users purple"></i>
<p>
Employees
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/employee" class="nav-link" >
<i class="nav-icon fas fa-user-plus "></i>
<p>
Add-Employee
</p>
</router-link>
</li>
<li class="nav-item">
<router-link to="/expiredemployee" class="nav-link">
<i class="nav-icon fas fa-user "></i>
<p>
Expired-Employees
</p>
</router-link>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-language pink"></i>
<p>
Nationality
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/nationality" class="nav-link">
<i class="nav-icon fas fa-language "></i>
<p>
Add-Nationality
</p>
</router-link>
</li>
</ul>
</li>
</li>
@can('isAdmin')
<li class="nav-item has-treeview ">
<a href="#" class="nav-link ">
<i class="nav-icon fas fa-user-secret blue"></i>
<p>
Admin Section
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link to="/user" class="nav-link" >
<i class="nav-icon fas fa-users " ></i>
<p>
Users
</p>
</router-link>
<li >
<router-link to="/developer" class="nav-link">
<i class="nav-icon fas fa-cogs"></i>
<p>Developer</p>
</router-link>
</li>
</ul>
</li>
</li>
@endcan
<li class="nav-item">
<router-link to="/profile" class="nav-link">
<i class="nav-icon fas fa-user orange"></i>
<p>
Profile
{{-- <span class="right badge badge-danger">New</span> --}}
</p>
</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="nav-icon fas fa-power-off red"></i>
<p>
{{ __('Logout') }}
</p>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
</ul>
</nav>
答案 0 :(得分:1)
尝试以下代码
function activeFunc(){
$("li").removeClass("active current-page");
var currentSelectedli = $("a.router-link-exact-active").parent('li');
currentSelectedli.addClass("current-page");
currentSelectedli.siblings().removeClass("active current-page");
var parentLI =currentSelectedli.parent("ul").parent("li");
if(parentLI.length!=0){
parentLI.addClass("active");
}
}
您必须找到li的子级和父级,然后设置活动类,因为vuejs不允许重新加载页面,因此出现了问题。
希望这对您有用
答案 1 :(得分:0)
我通过以下代码(AdminLTE-3.0.0-beta.2)解决了该问题
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">
但是,如果您不在仪表板视图中单击仪表板,则它不会关闭或折叠菜单,因此您必须将其放在li-> ul-> li标记中才能正常工作。