如果我单击任何子项，我该如何在顶级李上设置活动课程

Question

我有类似此html结构的数据库中的动态php菜单。

如果我单击“ LED电视”或“电视类别”，我想将活动类别设置为“所有类别”，例如：dropdown-item dropdown-toggle active

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

while doc:
    arr = doc.ColumnValues
    data.append(arr)
    doc = view.GetNextDocument(doc)

Answer 1

您可以使用.parents("li").last()来获得最高荣誉。

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

Answer 2

$(document).on('click', '.test', function () {
		var newids=$(this).data('id');
		$(this).parents().children('#'+newids).addClass("active");
	});

.active{
color:red !important;	
}

<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="test" data-id="20"><a id="403"  class="dropdown-item" href="#">LED TV</a></li>
    </ul>
  </li>
</ul>
  </li>
</ul>

$(document).on('click', '.test', function () {
		var newids=$(this).data('id');
		$(this).parents().children('#'+newids).addClass("active");
	});

.active{
color:red !important;	
}

<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="test" data-id="20"><a id="403"  class="dropdown-item" href="#">LED TV</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>