Add class to parent menu when sub menu clicked

Question

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.

Check this fiddle

$(document).ready(function() {
  $(".nav-sub-link").on("click", function(e) {
    debugger;
    e.preventDefault();
    $('.sidebar-nav-link').addClass("active");
  });
});

Answer 1

Updated Fiddle.

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>

Answer 2

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>