使用引导程序设置我的导航栏及其子项的链接
Posted
技术标签:
【中文标题】使用引导程序设置我的导航栏及其子项的链接【英文标题】：set link of my navbar and its children active with bootstrap 【发布时间】：2020-12-12 15:38:48 【问题描述】：下面显示了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>
【问题讨论】：
我会给你答案。你对我的回答有什么看法？如果你想让你的菜单有样式，那么你必须在这里添加 css，或者连接 bootstrap。 我的侧边栏使用的 CSS：adminlte.css:controlc.com/4d55af1call.css:controlc.com/4e5bbcfbOverlayScrollbars:controlc.com/41cb8abe 【参考方案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>【讨论】：
【参考方案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();
);
);
【讨论】：
以上是关于使用引导程序设置我的导航栏及其子项的链接的主要内容，如果未能解决你的问题，请参考以下文章