使用引导程序设置我的导航栏及其子项的链接

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"> 中删除“活动”使用 jquery 将仪表板标记为<a href="index.php" class="nav-link ">？

下面是代码和图片，当我选择时，项目列表在项目<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();
    });
    
});