选中时保持父菜单选项活动类并将活动类应用于子菜单选项答案

【问题标题】：Keep Parent Menu Option Active Class & Apply Active Class To Child Menu Option When Selected选中时保持父菜单选项活动类并将活动类应用于子菜单选项
【发布时间】：2015-08-06 14:05:05
【问题描述】：

我的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;
}

【问题讨论】：

标签： jquery css asp.net twitter-bootstrap webforms

【解决方案1】：

将此添加到您的脚本中：

// 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;
}

我认为这应该可以满足您的需求！

【讨论】：

正是我想要的
太好了，很高兴我能帮上忙！