javascript - 如何仅使用 jquery .slidetoggle 显示/隐藏单个 div

Question

如何仅当用户使用 jquery 单击时显示/显示单个 div

例如，当用户点击“促销”时，将显示促销内容，

当用户点击“体育”时，体育内容将显示，促销内容将隐藏......依此类推

我有这个工作代码，但是当我单击它时，它会立即显示所有内容。

HTML

<div class="clickto_showme">Promo</div>
<div class="showcontent">
  <p> Content for promo </p>
</div>

<div class="clickto_showme">Sports</div>
<div class="showcontent">
  <p> Content for Sports </p> 
</div>


<div class="clickto_showme">News</div>
<div class="showcontent">
  <p> Content for News </p>
</div>

CSS

.showcontent {
    display: none;
}

JS

  $('.clickto_showme').click(function() {
        $('.showcontent').slideToggle('slow');
        return false;
    });

工作中的 JSFIDDLE 在这里 http://jsfiddle.net/jowa513p/2/

Answer 1

使用$(this)来操作相对于当前点击元素的所需元素；和 next() 得到 sibling 。

$('.clickto_showme').click(function() {
    $(this).next('.showcontent').slideToggle('slow');
    return false;
});

Updated Fiddle