下拉菜单 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标签时切换菜单。另外，同时只能有一个选项被激活（其他描述应该被隐藏）。

- dmnmlk

Answer 1

为了解决这个问题，你可以简单地使用removeClass()从所有元素中删除.item-active类，然后再在被点击的元素上切换它。

另外请注意，你可以简化JS代码，只需修改类名，然后使用+兄弟选择器来隐藏/显示.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>

- Rory McCrossan

---

完美运行，没想到可以这么简单 :) 谢谢！ - dmnmlk

$('.item').removeClass('item-active'); 这样写也可以，不是吗？ - Deepu Sasidharan

那个方法可以工作，但会停止你点击的项目的切换功能。你的方法意味着你不能在连续点击时隐藏活动h3的内容 - 你只能一直显示它。 - Rory McCrossan