javascript - 如何使用 jquery/javascript 切换某些元素？

Question

有多个这样的词:

word1 word2 word3 ...

<a> 中的每个单词标签与 1 到 3 <li> 相关联标签。如果关联的 <a> 发生，我需要采取一些行动标签被点击。

1. 我想让它们在点击它们的关联词(比如 word1)时出现。
2. 如果点击另一个词，展开的例子会自动消失。
3. 如果再次点击 word1，示例应该被隐藏。

这是我的代码:

HTML

<a>word1</a>
<div class="sents">
    <li>This is a first example</li>
</div>

<a>word2</a>
<div class="sents">
    <li>This is a second example</li>
    <li>This is a second example</li>
</div>

<a>word3</a>
<div class="sents">
    <li>This is a third example</li>
    <li>This is a third example</li>
    <li>This is a third example</li>
</div>

脚本

$(document).ready(function () {
    $('a').click(function () {
        $('a').next('div').removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});

CSS

a:hover {
    background-color: yellow;
}

.sents {
    display: none;
}

.active {
    display: block;
    position: absolute;
    background-color: yellow;
    width: 100%;
    padding: 5px;
}

这是演示:

https://jsfiddle.net/kyubyong/umxf19vo/22/

我不太喜欢 javascript/jquery。提前感谢您的帮助。

Answer 1

问题是您从所有 div 中删除了 .active 类(包括您要切换的那个)，然后是 toggleClass 函数只是将其添加回去，因此您要切换的 div 将始终可见。

使用 siblings() 选择器函数来避免这种情况:

$(document).ready(function () {
    $('a').click(function () {
        $(this).next('div').siblings().removeClass('active');
        $(this).next('div').toggleClass('active');
    });
});

工作 fiddle :https://jsfiddle.net/umxf19vo/24/