Question

我有一个使用ASP.NET转发器输入到我的页面的列表。转发器包含一个div（divContainer），里面有两个div（divTitle和divDetails）。我正在隐藏divDetails，只想在用户点击divTitle时显示它。

在第一个divContainer中，这对我来说很好，但是生成的所有后续的都不起作用或者会滑下第一个divDetails。我假设这是因为转发器生成的所有元素都具有相同的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>

点击带有相同divContainer的divTitle时，JQuery脚本将显示正确的divDetails是什么？

感谢您的帮助。

Answer 1

给他们分类（ID必须是唯一的...问题的根源），如下所示：

<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()如果你只想显示动画，而不能切换再次隐藏它。

Answer 2

<强>演示

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

JQuery选择具有相同名称的孩子

2 个答案: