我的 asp.net
网站上有一个侧边菜单,当我单击左侧菜单时,我有一些 JQuery 为我添加了 class="active"
并保持它直到用户离开页面(这工作正常)但现在我需要将 2 个子菜单添加到其中一个选项,但我希望顶层保留 class="active"
并将 class="active"
应用于所选菜单,但我不知道该怎么做
JQuery
<script type="text/javascript">
//HIGHLIGHTS SELECTED MENU OPTION IN MAIN MENU AND LEFT HAND MENU
var url = window.location;
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// MAIN MENU
$('ul.navbar-nav a').filter(function () {
return this.href == url;
}).parent().addClass('active');
// LEFT HAND MENU MENU
$('ul.nav-stacked a').filter(function () {
return this.href == url;
}).parent().addClass('active');
</script>
HTML
<ul class="nav nav-stacked">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About us</a></li>
<ul class="nav nav-stackedsub">
<li><a runat="server" href="~/testpage1">test1</a></li>
<li><a runat="server" href="~/testpage2">test2</a></li>
</ul>
<li><a runat="server" href="~/Session/pg1">Session</a></li>
<li><a runat="server" href="~/EmailPg">Email</a></li>
</ul>
CSS
.nav-stacked > li {
float: none;
border-bottom: 1px solid #dddddd;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
.nav-stacked > li > a {
color: #999999;
padding-left: 10px;
font-family: ITCLubalinGraphStdBook;
font-size: 1.4em;
color: #999999;
}
.nav-stacked > li > a:hover,
.nav-stacked > li > a:focus {
color: lightblue;
background-color: transparent;
}
.nav-stacked > .active > a,
.nav-stacked > .active > a:hover,
.nav-stacked > .active > a:focus {
color: lightblue;
background-color: transparent;
}
.nav-stackedsub > li {
float: none;
border-bottom: 1px solid #dddddd;
}
.nav-stackedsub > li + li {
margin-top: 2px;
margin-left: 0;
}
.nav-stackedsub > li > a {
color: #999999;
padding-left: 30px;
font-family: ITCLubalinGraphStdBook;
color: #575b5f;
font-size: 1.4em;
color: #999999;
}
最佳答案
将此添加到您的脚本中:
// SUB MENU
$('ul.nav-stackedsub a').filter(function () {
return this.href == url;
}).parent().addClass('active');
// apply active class to the li before the ul class of the submenu
$('ul.nav-stackedsub a').filter(function () {
return this.href == url;
}).parent().parent().prev('li').addClass('active');
这是你的CSS:
.nav-stackedsub > .active > a,
.nav-stackedsub > .active > a:hover,
.nav-stackedsub > .active > a:focus{
color: lightblue;
background-color: transparent;
}
我认为这应该能满足您的需求!
关于jquery - 保持父菜单选项事件类并在选择时将事件类应用于子菜单选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31857911/