單擊另一個菜單時，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 不允許重新加載頁面，因此會出現問題。

希望這對你有用