如果我單擊任何子項，我該如何在頂級李上設置活動課程

Question

我有類似這種html結構的數據庫中的動態php菜單。

如果我單擊“ LED電視”或“電視類別”，我想將活動類別設置為“所有類別”，例如：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> 

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>