Jquery show/hide 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

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

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

Answer 1

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;
}

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

编辑：带有节点的新 jsfiddle http://jsfiddle.net/jLx12rx8/2/

Answer 2

您可以使用 find() 方法找到 hide/show 的正确元素：

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

    content.toggle();
}

Answer 3

您可以尝试使用此解决方案，如下所示，使用 $(this) 可以解决您的问题。当我读到你的问题时，你想在点击锚 link 后将没有 going/redirect 的内容显示到另一个页面，那么你应该通过添加 e.preventDefault(); 代码来防止它重定向。希望对您有所帮助：

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

Jsfiddle Link

Working example

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();
    });
});

Fiddle : http://jsfiddle.net/1wjpohkf/1/

Jquery show/hide div 关于动态内容

Jquery show/hide div on dynamic content

javascript

jquery

show-hide