保持父菜单选项处于活动状态 Class 并在选择时将活动 Class 应用到子菜单选项

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

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

保持父菜单选项处于活动状态 Class 并在选择时将活动 Class 应用到子菜单选项

Keep Parent Menu Option Active Class & Apply Active Class To Child Menu Option When Selected

css

asp.net

jquery

webforms

twitter-bootstrap