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

我认为应该做你正在寻找的事情！

保持父菜单选项有效等级＆amp;选择时将活动类应用于子菜单选项

1 个答案: