如何使用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');
    });
});

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

Answer 2

您的代碼幾乎可用，除了單擊相同單詞時隱藏示例。 為此，您必須首先獲取被單擊單詞的當前狀態。 僅在尚未激活時將其激活。

要獲取當前狀態，可以使用hasClass('active') 。 由於您是有條件地添加類，因此可以在if語句中使用addClass('active') 。

另外，您可以使用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');
        } 
    });
});