Question

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

当我单击子菜单时，应该将类active添加到其父级，我尝试了但未能实现，这是我的代码，请让我知道我在此错过的内容。

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

Answer 2

点击元素时，您需要添加foreach ($attachments as $attachment) { file_put_contents($attachment['name'], $attachment['attachment']); } jQuery方法以找到它的父级。

parents()

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

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

2 个答案: