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

要解决这个问题，您可以简单地使用 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>