javascript - 根据url更新侧边栏主菜单和子菜单类

Question

我在这里问过这个问题，但又出现了另一个问题，所以我决定保留旧问题以供引用。 Old question here.

旧问题只是关于根据 url 更新主菜单的类，但现在情况发生了变化。我将在下面提供新的侧边栏。

Sidebar without any active class yet

<div class="sidebar-scroll">
  <div id="sidebar" class="nav-collapse collapse">
    <!-- BEGIN SIDEBAR MENU -->
      <ul class="sidebar-menu">
        <li class="sub-menu">
          <a class="" href="panel-admin.php">
          <i class="icon-dashboard"></i>
          <span>Dashboard</span>
          </a>
          </li>
        <li class="sub-menu">
          <a href="javascript:;" class="">
          <i class="icon-calendar"></i>
          <span>Scheduling</span>
          <span class="arrow"></span>
          </a>
            <ul class="sub">
            <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
            <li><a class="" href="admin-esl.php">ESL Local</a></li>
            <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
            </ul>
          </li>
      </ul>
    <!-- END SIDEBAR MENU -->
  </div>
</div>

It would look like this:

Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops

如您所见，日程安排有一个子菜单。

Then how it would look like if I am on the dashboard. The sidebar would look like this

<div class="sidebar-scroll">
      <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
            <li class="sub-menu [active]"> //without the []
              <a class="" href="panel-admin.php">
              <i class="icon-dashboard"></i>
              <span>Dashboard</span>
              </a>
              </li>
            <li class="sub-menu">
              <a href="javascript:;" class="">
              <i class="icon-calendar"></i>
              <span>Scheduling</span>
              <span class="arrow"></span>
              </a>
                <ul class="sub">
                <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                <li><a class="" href="admin-esl.php">ESL Local</a></li>
                <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
                </ul>
              </li>
          </ul>
        <!-- END SIDEBAR MENU -->
      </div>
</div>

因此在这种情况下仪表板将突出显示

And how it would look like if Im on any of the sub-menu under Scheduling

 <div class="sidebar-scroll">
      <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
            <li class="sub-menu">
              <a class="" href="panel-admin.php">
              <i class="icon-dashboard"></i>
              <span>Dashboard</span>
              </a>
              </li>
            <li class="sub-menu [active]">
              <a href="javascript:;" class="">
              <i class="icon-calendar"></i>
              <span>Scheduling</span>
              <span class="arrow"></span>
              </a>
                <ul class="sub">
                <li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                <li><a class="" href="admin-esl.php">ESL Local</a></li>
                <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
                </ul>
              </li>
          </ul>
        <!-- END SIDEBAR MENU -->
      </div>

因为我在外语部分。主标题 Scheduling 和此 Foreign Langauges 将处于事件状态但不同的类。 Scheduling 的事件类是 sub-menu active 而 Foreign Languages 只会有 active。

我尝试过的 javascript 在这里不再适用，因为它只处理没有任何下拉菜单的菜单。 无论如何它都不起作用

Old javascript

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
    }
    //alert(this.href);
});
}); 
</script>

这里的目标是根据用户所在的 url 将“事件”类放入侧边栏部分。我刚刚包含('sidebar.php')这个侧边栏所以我只会更改这个文件而不是在每个 php 页面文件中放置一个边栏。但是主标题和下拉菜单有不同的事件类。

---

在gecco的帮助下找到了解决方案。 JavaScript 如下:

<script type="text/javascript">
   jQuery(function($) {
   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

   $('ul a').each(function() { 
      if (this.href === path) {
          $(this).addClass('sub-menu active');
          $(this).parent().closest("li").addClass('active'); //added this line to include the parent
          $(this).parent().parent().closest("li").addClass('active');
      }
   });
}); 
</script>

我已经中途使用 php 来做这个了哈哈哈哈。如果 current_url = db_page_url 然后放 echo class=active。哈哈哈。

Answer 1

<script type="text/javascript">
   jQuery(function($) {
   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

   $('ul a').each(function() { 
      if (this.href === path) {
          $(this).addClass('sub-menu active');
          $(this).parent().parent().closest("li").addClass('active2');
      }
   });
}); 
</script>

我在这里所做的唯一更改是在您的 JS 中添加另一行 $(this).parent().parent().closest("li").addClass('active2');

这是我的样式表

.active2 > a{
    color:red; //what ever the styles you want
}

或

不用样式也可以

jQuery(function($) {
var path = window.location.href; 
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
        $( this ).parent().parent().closest("li").addClass('active2');
        $('.active2 a:first').addClass('active'); //add the active class to the parent node
    }
});
});