下拉菜单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>