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）然后'click'Paul我希望Johns父母用is-closed替换is-open。

可能的？

有意义吗？

Answer 1

你可以这样做：

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

Answer 2

您可以关闭所有<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');
});

Example fiddle

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/

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

5 个答案: