Reputation: 149
I want to add class to the parent menu when I clicked on the submenu.
When I click on submenu then class active
should be added to its parent, I tried but not able to achieve this, Here is my code, pls let me know what I missed in this.
$(document).ready(function() {
$(".nav-sub-link").on("click", function(e) {
debugger;
e.preventDefault();
$('.sidebar-nav-link').addClass("active");
});
});
Upvotes: 1
Views: 3015
Reputation: 67525
You could use the jQuery method closest()
with the $(this)
to target the clicked element parent, like :
$(this).closest('.sidebar-nav-item').find('a.sidebar-nav-link').addClass("active");
Working sample:
$(function() {
$(".nav-sub-link").on("click", function(e) {
e.preventDefault();
$(this).closest('.sidebar-nav-item').find('a.sidebar-nav-link').addClass("active");
});
});
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link active">Page 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link active">Menu 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
</ul>
</li>
</ul>
</div>
Upvotes: 1
Reputation: 6158
You need to add parents()
Jquery method to find it's parents when clicked the elements.
$(function() {
$(".nav-sub-link").on("click", function(e) {
e.preventDefault();
$('.sidebar-nav-item .sidebar-nav-link').removeClass("active");
$(this).parents('.sidebar-nav-item').find('.sidebar-nav-link').addClass("active");
});
});
.active {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slim-sidebar">
<label class="sidebar-label">Navigation</label>
<ul class="nav nav-sidebar">
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Dashboard</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link active">Page 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Page 05</a></li>
</ul>
</li>
<li class="sidebar-nav-item with-sub">
<a href="" class="sidebar-nav-link"><i class="icon ion-ios-home-outline"></i> Menu</a>
<ul class="nav sidebar-nav-sub">
<li class="nav-sub-item"><a href="" class="nav-sub-link active">Menu 01</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 02</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 03</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 04</a></li>
<li class="nav-sub-item"><a href="" class="nav-sub-link">Menu 05</a></li>
</ul>
</li>
</ul>
</div>
Upvotes: 1