jquery - 如果我单击任何子项，如何在顶部设置事件类

Question

我有来自数据库的动态 php 菜单，类似于这个 html 结构。

如果我点击 LED TV 或 TV CATEGORIES，我想将 active class 设置为 ALL CATEGORIES，如下所示:dropdown-item dropdown-toggle active

我如何在 php 或 jquery 中做到这一点？

<li class="dropdown"><a id="20" class="dropdown-item dropdown-toggle " href="index.php?page=AllCategories&categoriesgroup=allcategoriesgroup"> ALL CATEGORIES<i class="fas fa-caret-down"></i></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu dropdown-reverse"><a id="402" class="dropdown-item" href="index.php?page=productCategories&categories=tvcategories">TV CATEGORIES<i class="fas fa-caret-down"></i></a>
            <ul class="dropdown-menu">
                <li class=""><a id="403" class="dropdown-item" href="index.php?page=productDetail&product=ledtv">LED TV</a></li>
            </ul>
        </li>
    </ul>
</li>

Answer 1

您可以使用 .parents("li").last() 获取顶部 li。

$(".dropdown-item").click(function() {
  $(this).parents("li").last().toggleClass("active");
});

$(".dropdown-item").click(function() {
  $(this).parents("li").last().toggleClass("active");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="dropdown"><a id="20" class="dropdown-item dropdown-toggle " href="#"> ALL CATEGORIES<i class="fas fa-caret-down"></i></a>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu dropdown-reverse"><a id="402" class="dropdown-item" href="#">TV CATEGORIES<i class="fas fa-caret-down"></i></a>
        <ul class="dropdown-menu">
          <li class=""><a id="403" class="dropdown-item" href="#">LED TV</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>