如何使侧边栏菜单保持打开状态？
如何使侧边栏菜单保持打开状态？
提问于 2021-01-21 13:48:54
我用的是adminlte 3。
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="http://localhost:84/mysite/" class="brand-link">
<img src="http://localhost:84/mysite/assets/icon/instagram.png" alt="AdminLTE Logo"
class="brand-image img-circle elevation-3" style="opacity: .8">
<span class="brand-text font-weight-light"> AClub Backend </span>
</a>
<div class="sidebar">
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="info">
<a href="#" class="d-block">Boby Kurniawan <br> Developer U001 </a>
</div>
</div>
<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 has-treeview">
<a href="http://localhost:84/mysite/#" class="nav-link ">
<i class="nav-icon fas fas fa-list"></i>
<p>Master <i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="http://localhost:84/mysite/Member/" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Members</p>
</a>
</li>
<li class="nav-item">
<a href="http://localhost:84/mysite/Group/" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Group</p>
</a>
</li>
</ul>
</li>
<li class="nav-header"></li>
<li class="nav-item">
<a href="http://localhost:84/mysite/Loginform/goToportal" class="nav-link">
<i class="nav-icon fas fa-undo-alt"></i>
<p>
Back to menu category
</p>
</a>
</li>
<li class="nav-item">
<a href="http://localhost:84/mysite/welcome/logout" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>现在，当我打开我的页面(以组为例)时，url会变成这个http://localhost:84/mysite/Group/，子菜单是这样打开的
这就是我要做的
var url = window.location;
$('ul.nav-sidebar a').filter(function() {
return this.href == url;
}).addClass('active');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');但当我打开另一个页面时，它位于Group路径内部。示例http://localhost:84/mysite/Group/detail/1
我的菜单变成这样
所以，我的问题是如何保持菜单打开？提前感谢并为我的英语表达歉意。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-26 10:47:33
这应该是可行的
var url = window.location.href;
$('ul.nav-sidebar a').filter(function() {
var rgx = new RegExp($(this).attr("href"), "gi");
return url.match(rgx);
}).addClass('active');
$('ul.nav-treeview a').filter(function() {
var rgx = new RegExp($(this).attr("href"), "gi");
return url.match(rgx);
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');Stack Overflow用户
发布于 2021-01-25 11:19:19
我想你可以做到的
var url = window.location.url;
$('ul.nav-treeview a').filter(function() {
return url.includes(this.href);
}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65821828
复制相关文章
相似问题
腾讯云开发者
