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() 来获得兄弟姐妹。

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

Updated Fiddle

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

1 个答案: