javascript - 为父级的父级添加类

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我的菜单上，我想通过 jQuery 添加一个类，FirstLevel li并在选择另一个子菜单时删除该类。

我已经尝试过了，但并没有真正起作用：

$('#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'); } });

谢谢你。

score 2 · Accepted Answer

给你的 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');
});

这是一个小提琴

score 1 · Accepted Answer

这可以满足您的所有要求：

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

在这里检查：http: //jsfiddle.net/c4dTK/

score 1 · Accepted Answer

这是解决方案：

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

尝试这个

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

或者：

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

score 0 · Accepted Answer

这是另一个答案

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

jsfiddle

javascript - 为父级的父级添加类

6 回答 6

这是一个小提琴

Related

Reference