Question

有多个这样的词：

word1 word2 word3 ...

<a>标记中的每个字都与1到3个<li>标记相关联。如果点击关联的<a>标记，我需要执行一些操作。

如果点击相关的单词（例如，word1），我想让它们出现。
如果单击其他单词，则展开的示例应自动消失。
如果再次单击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

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

使用siblings()选择器功能来避免这种情况：

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

工作小提琴：https://jsfiddle.net/umxf19vo/24/

Answer 2

您的代码几乎可以正常工作，除非在单击相同的单词时隐藏示例。要做到这一点，您必须首先获得单击单词的当前状态。只有在它尚未激活时才激活它。

要获取当前状态，您可以使用hasClass('active')。由于您要添加类（有条件地），因此可以在addClass('active')语句中使用if。

或者，您可以使用toggleClass('active', !isActive)，但是，当再次单击它时停用某个单词时，您将尝试删除之前已被删除的类。这将是与DOM的无用交互，我更喜欢使用if来阻止它。

$(document).ready(function () {
    $('a').click(function () {
        var isActive = $(this).next('div').hasClass('active');
        $('a').next('div').removeClass('active');
        if (!isActive) {
          $(this).next('div').addClass('active');
        }
    });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

尝试这样

$(document).ready(function () {
    $('a').click(function () {
        if ($(this).next('div').hasClass('active')){
            $('.sents').removeClass('active');
        }
        else{
            $('.sents').removeClass('active');
            $(this).next('div').addClass('active');
        } 
    });
});

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

3 个答案: