jQuery的显示/隐藏DIV的动态内容，

我有一个循环，它输出以下内容...jQuery的显示/隐藏DIV的动态内容，

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

当你再次点击标题，它应该隐藏.item内容

的问题是，作为我的查询遍历，它为每篇文章分配一个.item内容类，以便每篇文章一起打开和关闭。

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

来源

2015-03-25 lowercase

您可以尝试使用此解决方案，你可以看到下面，使用$(this)可以解决你的问题。当我读到您的问题时，您希望在点击锚链接后不显示/重定向到其他页面，然后通过添加e.preventDefault();代码来阻止其重定向。希望这有助于：

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

的jsfiddle链接

Working example

来源

2015-03-25 01:45:54

嗨，那里。这不让我点击项目标题？我如何使.item-title成为常规链接？ – lowercase 2015-03-25 01:56:27

你的意思是通过定期的链接。因为现在，它已经作为链接反应，但没有重定向。另一个解决方案是，你可以删除'e.preventDefault（）;'然后把'＃'放在锚链接的href属性中。 – 2015-03-25 02:02:07

当我点击链接 - 它只是跳回到页面的顶部。没有显示/隐藏。 – lowercase 2015-03-25 02:13:02

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/

来源

2015-03-25 01:44:28 Soronbe

这看起来不错。我如何管理项目标题上的a/link？我的意思是，我希望项目标题是一个常规链接。 – lowercase 2015-03-25 01:50:10

@lowercase新版本适合你的目标吗？ – Soronbe 2015-03-25 01:55:21

没有。只是重新加载页面。 – lowercase 2015-03-25 01:58:38

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

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

    content.toggle(); 
}

来源

2015-03-25 01:45:27 Phylogenesis

可以隐藏的内容，然后建立一个处理程序上的标题，打开里面的相应内容项：

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

来源

2015-03-25 01:49:56

接下来可能会比找到更好的工作http://jsfiddle.net/Ljux0stb/1/ – 2015-03-25 02:01:14

它会，只要HTML结构永远不会改变。但是如果他决定改变布局，他不得不重写代码。 – 2015-03-25 02:36:41

试试这个：

$(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/

来源

2015-03-25 02:00:41 Vahi

jQuery的显示/隐藏DIV的动态内容，

回答

相关问题