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内容。

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

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

问题在于，当我的查询循环时，它会为每篇文章分配一个.item内容类，以便每篇文章一起打开和关闭。

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

Answer 1

您可以尝试使用此解决方案，如下所示，使用$(this)可以解决您的问题。在我阅读您的问题时，您希望在单击锚点链接后显示内容而不进行/重定向到另一个页面，然后您应该通过添加e.preventDefault();代码来阻止它重定向。希望这有帮助：

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

Jsfiddle Link

Working example

Answer 2

http://jsfiddle.net/jLx12rx8/ Jquery的：

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

HTML：

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

的CSS：

.item-content {
    display:none;
}

我认为内容是标题节点的子节点，因为您没有指定标题和内容节点的链接方式。

编辑：一个节点的新jsfiddle http://jsfiddle.net/jLx12rx8/2/

Answer 3

您可以使用find()方法找到要隐藏/显示的正确元素：

$('.item-title').click(function () {
    var content = $(this).find('.item-content');

    content.toggle();
}

Answer 4

您可以隐藏内容，然后在标题上设置处理程序以打开其中的相应内容项：

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

Answer 5

试试这个：

$(document).ready(function () {
    //Initially hide all the item-content
    $('.item-content').hide();

    // Attach a click event to item-title
    $('.item-title').on('click', function () {
        //Find the next element having class item-content
        $(this).next('.item-content').toggle();
    });
});

小提琴：http://jsfiddle.net/1wjpohkf/1/

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

5 个答案: