JQuery选择同名子项
JQuery选择同名子项
提问于 2010-09-25 05:07:52
我有一个列表，正在使用ASP.NET中继器输入到我的页面中。中继器包含一个带有两个div (divTitle和divDetails)的div (divContainer)。我隐藏了divDetails，并且只想在用户单击divTitle时显示它。
这对我来说在第一个divContainer中工作得很好，但是所有后续生成的divDetails都不能工作，或者会滑下第一个all。我假设这是因为中继器生成的所有元素都具有相同的ID，所以它选择第一个元素。我可能只需要寻找子元素或类似的东西，但我正在努力让它工作。
下面是HTML：
<div id="divContainer">
<div id="divTitle">Foo</div>
<div id="divDetails" class="display:none">Foo details</div>
</div>
<div id="divContainer">
<div id="divTitle">Foo</div>
<div id="divDetails" class="display:none">Foo details</div>
</div>当具有相同divDetails的divTitle被单击时，JQuery脚本将显示正确的divContainer？
谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-09-25 05:09:43
为它们提供类(ID必须是问题的unique...the根)，如下所示：
<div class="divContainer">
<div class="divTitle">Foo</div>
<div class="divDetails" style="display:none">Foo details</div>
</div>然后通过.find()或.children()找到相应的元素：
$(".divContainer").click(function() {
$(this).find(".divDetails").toggle();
});这里我在切换它的打开/关闭，你也可以使用.slideToggle()播放动画，或者如果你只想显示它，只使用.show()，而不是切换--可以再次隐藏它。
Stack Overflow用户
发布于 2010-09-25 05:11:39
演示
http://jsfiddle.net/Sfna4/
<div class="divContainer">
<div class="divTitle">Moo</div>
<div class="divDetails" style="display:none">Moo details</div>
</div>
<div class="divContainer">
<div class="divTitle">Foo</div>
<div class="divDetails" style="display:none">Foo details</div>
</div>
jQuery(function(){
jQuery('.divTitle').bind('click',function(){
jQuery(this).siblings('.divDetails').slideToggle();
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3790999
复制相关文章
相似问题
腾讯云开发者
