使用引導程序設置我的導航欄及其子項的鏈接

Question

下面顯示了My Navbar的代碼，基於它顯示儀表板當前處於活動狀態的代碼。 我的問題在這個原始代碼下面。

此側邊欄的 CSS：

• adminlte.css: https://controlc.com/4d55af1c
• all.css: https://controlc.com/4e5bbcfb
• 疊加滾動條： https ://controlc.com/41cb8abe

<!-- ORIGINAL -->
<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

我的問題：如何使<li class="nav-item has-treeview">成為<li class="nav-item has-treeview menu-open">以及如何設置項目和項目列表的<a class="nav-link">到<a class="nav-link active">並將儀表板的<a href="index.php" class="nav-link active">標簽中的 'active' 移除到<a href="index.php" class="nav-link ">通過使用 jquery？

下面是代碼和圖片，當我選擇時，項目<li>項目列表：圖片：

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

以下是我在項目<li>選擇Projects Report時的代碼和圖片：圖片：

<!-- Sidebar -->
<div class="sidebar">
  <!-- Sidebar Menu -->
  <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <li class="nav-item">
            <a href="index.php" class="nav-link active">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Dashboard
              </p>
            </a>
          </li>
          <li class="nav-item has-treeview menu-open">
            <a class="nav-link active">
              <i class="nav-icon fas fa-th"></i>
              <p>
                Project
                <i class="fas fa-angle-left right"></i>
              </p>
            </a>
              <ul class="nav nav-treeview">
              <li class="nav-item">
                <a href="project.php" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="projectReport.php" class="nav-link active">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Projects Report</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>
    </nav>
</div>

Answer 1

按照你想要的方式做了。 通過active類。 通過點擊標簽a ( item - Project )，一個菜單將根據計數器的原理出現/隱藏。

 /*---This is a working example in vanilla js---*/ /*let click_a = document.querySelector('.nav-item.has-treeview > a'); let click_popup = document.querySelector('.nav.nav-treeview'); click_a.onclick = function() { click_popup.classList.toggle('active'); }*/ /*---This is a working example in jquery---*/ $('.nav-item.has-treeview > a').on('click', function(){ $('.nav.nav-treeview').toggleClass('active'); });

 .nav.nav-treeview { display: none; } .active { display: block!important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="sidebar"> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <li class="nav-item"> <a href="index.php" class="nav-link active"> <i class="nav-icon fas fa-tachometer-alt"></i> <p> Dashboard </p> </a> </li> <li class="nav-item has-treeview"> <a class="nav-link"> <i class="nav-icon fas fa-th"></i> <p> Project <i class="fas fa-angle-left right"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="project.php" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Projects List</p> </a> </li> <li class="nav-item"> <a href="project.php" class="nav-link"> <i class="far fa-circle nav-icon"></i> <p>Projects Report</p> </a> </li> </ul> </li> </ul> </nav> </div>

Answer 2

$(function() {
    "use strict";
     var url = window.location + "";
        var path = url.replace(window.location.protocol + "//" + window.location.host + "/", "");
        var element = $('ul#sidebarnav a').filter(function() {
            return this.href === url || this.href === path;// || url.href.indexOf(this.href) === 0;
        });
        element.parentsUntil(".sidebar-nav").each(function (index)
        {
            if($(this).is("li") && $(this).children("a").length !== 0)
            {
                $(this).children("a").addClass("active");
                $(this).parent("ul#sidebarnav").length === 0
                    ? $(this).addClass("active")
                    : $(this).addClass("selected");
            }
            else if(!$(this).is("ul") && $(this).children("a").length === 0)
            {
                $(this).addClass("selected");
                
            }
            else if($(this).is("ul")){
                $(this).addClass('in');
            }
            
        });

    element.addClass("active"); 
    $('#sidebarnav a').on('click', function (e) {
        
            if (!$(this).hasClass("active")) {
                // hide any open menus and remove all other classes
                $("ul", $(this).parents("ul:first")).removeClass("in");
                $("a", $(this).parents("ul:first")).removeClass("active");
                
                // open our new menu and add the open class
                $(this).next("ul").addClass("in");
                $(this).addClass("active");
                
            }
            else if ($(this).hasClass("active")) {
                $(this).removeClass("active");
                $(this).parents("ul:first").removeClass("active");
                $(this).next("ul").removeClass("in");
            }
    });
    $('#sidebarnav >li >a.has-arrow').on('click', function (e) {
        e.preventDefault();
    });
    
});