Here is the layout of my menu along with the jQuery code included below. The functionality is such that when I click on Home Page, its parent element (list item) receives an active class.
Currently, when I am on the Home Page, the list item for Account Codes and Branches also have an active class applied. How can I ensure that only the Home Page is affected?
Additionally, how can I modify the jQuery code to accommodate this nested list format in the menu?
<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>