javascript - Jquery 在动态内容上显示/隐藏 div

Question

我有一个输出以下内容的循环...

<div class="item-title"><a href="">Title here</a></div>
   <div class="item-content">
      <div class="item-body">
      Body Here
      </div>
   </div>
</div>

我想在页面加载时隐藏 .item-content。

当你点击标题时，它应该显示 .item-content

当你再次点击标题时，它应该隐藏 .item-content

问题是，随着我的查询循环，它为每篇文章分配了一个 .item-content 类，因此每篇文章一起打开和关闭。

如何让它显示每个标题只打开相应的内容而不是每篇文章的内容？

Answer 1

您可以尝试使用此解决方案，如下所示，使用 $(this) 可以解决您的问题。当我读到你的问题时，你希望在单击 anchor 链接后不转到/重定向到另一个页面的情况下显示内容，那么你应该通过添加 e.preventDefault(); 代码来防止它重定向。希望这有助于:

$('.item-content').hide();
$(document).on('click','.item-title', function(e){
   e.preventDefault();
   $(this).next('.item-content').toggle();
});

Jsfiddle 链接

Working example