jquery - 确保 li 中的元素在单击另一个类时删除类

Question

我为示例提供了一些基本标记

<ul class="foo">
    <li class="baz is-closed"><p class="bar">John</p></li>
    <li class="baz is-closed"><p class="bar">Paul</p></li>
    <li class="baz is-closed"><p class="bar">George</p></li>
    <li class="baz is-closed"><p class="bar">Ringo</p></li>
</ul>

然后我让这个 jquery 在点击时影响父类 -

$('.bar').click(function() {
    $(this).parent().toggleClass('is-open');
    $(this).parent().toggleClass('is-closed');
    return false;
});

我想要的是当有人“点击”John（父 li 更改为 is-open）然后“点击”Paul 我希望 Johns 的父级将 is-open 替换为 is-close。

可能的？

有道理？

Answer 1

你可以这样做：

$('.bar').click(function() {
    $(this).parent().addClass('is-open').siblings().removeClass('is-closed');
    return false;
});

Answer 2

您可以关闭 all <li>，然后打开单击的一个：

$('.bar').click(function() {
     $('.baz').toggleClass('is-closed');
     $(this).parent().toggleClass('is-open');
    return false;  
});

希望我明白你想要的。

Answer 3

试试这个：

$('.bar').click(function() {
    $('.foo li').removeClass('is-open').addClass('is-closed');
    $(this).closest('li').toggleClass('is-open is-closed');
});

示例小提琴

Answer 4

为什么不直接选择.is-open点击类并将其替换为.is-closed？

$('.foo .is-open').removeClass('is-open').addClass('is-closed');

jsFiddle

Answer 5

你可以试试：

$('li').on('click',function(){
    $('li.baz')
        .removeClass('is-open')
        .addClass('is-closed');

    $(this)
        .removeClass('is-closed')
        .addClass('is-open');
});

演示：http: //jsfiddle.net/YkZqj/17/