AdminLTE 3の展開メニューは、別のメニューをクリックしても閉じたり折りたたまれたりしません

debugcn 投稿 Dev

モハマド・ウスマン

別のメニュー項目をクリックしたときに他のスライドダウンメニューを閉じるにはどうすればよいですか？現在、すべてのメニュー項目が1つずつ開いており、項目をもう一度クリックすることによってのみ閉じることができます。どんな助けでも大歓迎です。問題を解決するためにどの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>

OmarSafi

以下のコードを試してください

 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ではページを再読み込みできないため、問題が発生していました。

これがあなたのために働くことを願っています

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]