jquery - 单击子菜单时将类添加到父菜单

Question

我想在单击子菜单时将类添加到父菜单。

当我单击子菜单时，类 active 应该添加到其父级中，我尝试过但无法实现这一点，这是我的代码，请让我知道我在其中错过了什么。

<强> 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 。

您可以使用 jQuery 方法 closest() 和 $(this) 来定位被单击的元素父级，例如:

$(this).closest('.sidebar-nav-item').find('a.sidebar-nav-link').addClass("active");

工作示例:

$(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>