下拉菜單jquery切換項目

Question

我有一個jQuery下拉菜單的問題。 我的代碼：

$('.item-active, .item').click(function() { 
    $(this).toggleClass('item-active');
    if($('h3').hasClass('item-active')) {
        $(this).siblings().css( 'display', 'block' );       
    }   

    $(this).toggleClass('item');    
    if($('h3').hasClass('item')) {
        $(this).siblings().css( 'display', 'none' );    
    }
});

<div>
    <h3 class="item-active">item 1</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>
<div>
    <h3 class="item">item 2</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>
<div>
    <h3 class="item">item 3</h3>
    <div class="item-desc">Lorem Lorem</div>
</div>

我只需要在點擊相關的h3時切換菜單。 此外，只有一個項目可能同時處於活動狀態（其余描述應隱藏）

Answer 1

要解決這個問題，您可以簡單地使用.item-active removeClass()從所有元素中刪除.item-active類，然后在單擊的元素上切換它。

另請注意，您可以簡化JS代碼以修改類，並使用+兄弟運算符將CSS保留為隱藏/顯示.item-desc 。 嘗試這個：

 $('.item').click(function() { $('.item').not(this).removeClass('item-active'); $(this).toggleClass('item-active'); }); 

 .item-active { color: #C00; } .item-desc { display: none; } .item-active + .item-desc { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h3 class="item item-active">item 1</h3> <div class="item-desc">Lorem Lorem</div> </div> <div> <h3 class="item">item 2</h3> <div class="item-desc">Lorem Lorem</div> </div> <div> <h3 class="item">item 3</h3> <div class="item-desc">Lorem Lorem</div> </div>