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

尝试以下代码

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

希望这对您有用

Answer 2

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

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

2 个答案: