jQuery菜单中的所有列表项均设置为活动状态，而不仅仅是选定的项

Question

这是我菜单的结构。我已经附上了下面的jQuery代码。它的工作方式是，当我单击“主页”时，其父元素（即列表项）具有设置为活动状态的类。

此刻，当我在主页上时，其列表项有一个活动班级。但是，“帐户代码”和“分支机构”的列表项上也设置了一个活动类。如何确保只有我的主页受到影响？

此外，在列表中有新列表的情况下，如何更改我的jQuery代码以使用此菜单格式？

<ul class="sidebar-menu" id="navigation-menu">
    <li><a href="/" class="nav-link"><i class="far fa-square"></i><span>Home Page</span></a></li>
    <li class="menu-header">Administrator Mode</li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Configuration</span></a>
        <ul class="dropdown-menu">
            <li><a href="/Configuration/Account Codes" class="nav-link">Account Codes</a></li>
            <li><a href="/Configuration/Branches" class="nav-link">Branches</a></li>
        </ul>
    </li>
</ul>


<script>
    $(document).ready(function () {
        var current = location.pathname;
        $("#navigation-menu a").each(function () {
            var $this = $(this);
            if ($this.attr('href').indexOf(current) !== -1) {
                console.log($this);
                $this.parent().addClass('active');
                console.log("matched");
            }
        });
    });
</script>

Answer 1

下拉菜单

下拉菜单最有效的HTML布局模式是在<ul> / <ol>和<li>之间切换：

<ul>
   <li class='dropdown'>
     <a href="#/">Dropdown</a>
     <ul class='menu' style='display:none'>
      <li>Item</li>
      <li class='dropdown'>
        <a href='#/'>Dropdown</a>
        <ul class='menu' style='display:none'>
          <li>Item</li>
          <li>Item</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

此外，如果您希望菜单最初被关闭，请添加以下嵌入式样式：

<ul class='menu' style='display:none'>

<a>锚具有默认行为，在使用Bootstrap或Foundation之类的框架时很难覆盖。尝试在.active个子标签上切换.has-dropdown类。

---

演示

演示中评论的详细信息

/*
Delegate click event to each .has-dropdown
Toggle .active class on that particular .has-dropdown children tags
Get next .dropdown-menu and toggle it up/down and toggle .active
*/
$('.has-dropdown').on('click', function(e) {
  $(this).children().toggleClass('active');
  $(this).next('.dropdown-menu').slideToggle().toggleClass('active');
});

.active {
  color: tomato
}

<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css' rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<ul id="navigation-menu" class="sidebar-menu">
  <li>
    <a href="#/" class="nav-link">
      <i class="fas fa-home"></i><span> Home Page</span>
    </a>
  </li>
  <li class="menu-header">
    <a href="#/" class="nav-link has-dropdown">
      <i class="fas fa-tools"></i><span> Administration</span>
    </a>
    <ul class="nav-item dropdown-menu" style='display:none'>
      <li>
        <a href="#/" class="nav-link has-dropdown">
          <i class="fas fa-lock"></i><span> Security</span>
        </a>
        <ul class="dropdown-menu" style='display:none'>
          <li>
            <a href="#/" class="nav-link">
              <span> Account Codes</span>
            </a>
          </li>
          <li>
            <a href="#/" class="nav-link">
              <span> Branches</span>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#/" class="nav-link has-dropdown">
          <i class="fas fa-cog"></i><span> Configuration
        </span></a>
        <ul class="dropdown-menu" style='display:none'>
          <li>
            <a href="#/" class="nav-link"><span> Layout</span></a>
          </li>
          <li>
            <a href="#/" class="nav-link"><span> Assets</span></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>