Question

我有一个html / javascript代码，其基本结构如下：

<ul>
<li>
    <div id="1" class="A">
    <ul>
    <li>...</li>
</li>
<li>
    <div id="2" class="A">
    <ul>
    <li>...</li>
</li>
<li>
    <div id="3" class="A">
    <ul>
    <li>...</li>
</li>

当你点击A类时，一个类将被附加到它的兄弟ul，样本是这样的：

<li>
    <div id="1" class="A">
    <ul class="active">
    <li>...</li>
</li>

因此，当您点击任何A类时，它会自动将类Active 附加到第一个ul实例。当您点击所有 A类时，所有ul将附加 class Active 。

现在，我想要实现的是，当我点击特定的A类时，所有其他具有A类的ul将被删除 class Active 。 特定A类将是唯一获得类Active属性的人。

有可能吗？

Answer 1

尝试

$('.A').click(function(){
    $('.active').removeClass('active');
    $(this).parent().find('ul').addClass('active');
});

Answer 2

要将活动类添加到兄弟姐妹，请使用

$('div.A').click(function(){
    $('.active').removeClass('active');
    $(this).siblings('ul').addClass('active');
});

但是在你的例子中，ul并不完全是兄弟姐妹，而是div的孩子。

$('div.A').click(function(){
    $('.active').removeClass('active');
    $(this).find('ul').addClass('active');
});

或

$('div.A').click(function(){
    $('.active').removeClass('active');
    $(this).children('ul').addClass('active');
});

使用jquery添加和删除类属性

2 个答案: