单击另一个菜单时，AdminLTE 3 展开菜单不会关闭/折叠

Question

单击另一个菜单项时，如何关闭其他下拉菜单？ 现在所有的菜单项都被一个一个打开，只有再次单击该项目才能关闭它们。 任何帮助将不胜感激。我不知道可以使用什么 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>

Answer 1

我通过以下代码解决了它（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 标签中才能正常工作。

Answer 2

试试下面的代码

 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 不允许重新加载页面，因此会出现问题。

希望这对你有用