问题描述
下面的代码显示了My Navbar的代码，基于该代码，它显示了仪表板当前处于活动状态。我的问题在原始代码下面。
此边栏的CSS：
- adminlte.css：https://controlc.com/4d55af1c
- all.css：https://controlc.com/4e5bbcfb
- OverlayScrollbars：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">并删除通过使用jquery从<a href="index.PHP" class="nav-link active">标签的“活动”到仪表板进入<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>
解决方法
按照您想要的方式进行。通过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>,
$(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();
});
});