Question

如果点击父母的孩子的孩子，如何在点击下拉菜单中添加一个类。这是我的HTML：

<ul id="FirstLevel">
    <li><a href="#">FirstLevel</a></li>
    <li><a href="#">FirstLevel</a>
        <ul class="secondLevel">
            <li><a href="#">SecondLevel</a></li>
                   <ul class="LastLevel">
                         <li><a href="#">LastLevel</a></li>
                         <li><a href="#">LastLevel</a></li>
                   </ul>
            <li><a href="#">SecondLevel</a></li>
            <li><a href="#">SecondLevel</a></li>

        </ul>
    </li>
    <li><a href="#">FirstLevel</a></li>
    <li><a href="#">FirstLevel</a></li>
    <li><a href="#">FirstLevel</a></li>
</ul

所以我需要的是;我的菜单onclick或LastLevel上的SecondLevel我要在FirstLevel li上通过jQuery添加一个类，并在选择另一个子菜单时删除该类

我试过这个但是没有真正起作用：

$('#firstUl').find('li').click(function(){ //removing the previous selected menu state $('#firstUl').find('li').removeClass('active'); //is this element from the second level menu? if($(this).closest('ul').hasClass('lastLevel')){ $(this).parents('li').parents('li').addClass('menuActive'); //this is a parent element }else{ $(this).addClass('menuActive'); } });

谢谢。

Answer 1

给你的FirstLevel <li>'s一个类，它可以更容易地定位正确的元素：

<li class="first-level"><a href="#">FirstLevel</a></li>

然后将点击处理程序附加到所有子<li>'s：

$('li.first-level li').on('click', function(e) {
  e.preventDefault(); // prevent the link from being followed
  $(this).closest('li.first-level').toggleClass('yourClass') // 
         .siblings('li.first-level').removeClass('yourClass');
});

Here's a fiddle

Answer 2

这可以完成你想要的所有事情：

$("ul.secondLevel a").click(function () {
    $("#FirstLevel>li").removeClass("blue");
    $(this).parents("ul.secondLevel").parent().addClass("blue");
});

点击此处：http://jsfiddle.net/c4dTK/

Answer 3

以下是解决方案：

$('.secondLevel li a').click(function (e) {
    $('#FirstLevel > li').removeClass('selected');
    $(this).parents('.secondLevel').parent().addClass('selected');
})

Answer 4

由于您的第一级列表已获得Id，您可以使用选择器找到该元素，如下所示：

$(".secondLevel a").click(function () {
    e.preventDefault();
    $("#FirstLevel li").addClass("newClass");
});

Answer 5

试试这个

jQuery(this).parent('ul').addClass('yourClass');

或者：

jQuery(this).parents('ul').addClass('yourClass');

Answer 6

这里有另一个答案

var test= $('li li,li li li')
console.log(test)
            test.click(function(){
   $(this).parents('ul').closest('li').addClass('kaka');
});

<强> jsfiddle

为父级父级添加类

6 个答案:

Here's a fiddle