javascript - 根据元素在层次结构中的存在将类添加到祖先元素

Question

我在下面有一个示例代码

<li class="treeview">
 <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
 <ul class="treeview-menu">
    <li class="active"><a href="#">Link in level 2</a></li>
    <li><a href="#">Link in level 2</a></li>
 </ul>
</li>

如果 li 之一有一个类 active我怎样才能添加一个类 active在 parent 身上li或者这部分

<li class="treeview">

Answer 1

您可以使用 jquery 来实现这一点。请在下面找到代码段。

$('.treeview-menu li').on('click', function() {
  $(this).addClass('active');
  $(this).closest('li.treeview').addClass('active');
})

.active>a {
  color: green;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<ul>
  <li class="treeview">
    <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
 <span class="pull-right-container">
 <i class="fa fa-angle-left pull-right"></i>
 </span>
 </a>
    <ul class="treeview-menu">
      <li class=""><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul>