jquery - 保持父菜单选项事件类并在选择时将事件类应用于子菜单选项

Question

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

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

我认为这应该能满足您的需求!