jquery - 使用子项或复合项(而不是父项)切换显示隐藏其他人？

Question

如何通过点击子项或复合项而不是点击父项来切换显示隐藏？

我想在单击缩略图 A 时切换图像 A，而不是单击整个 div 。谢谢。

HTML

<div>
  <dl>
    <dt>Thumbnail A</dt>
    <dd>Name A</dd>
    <dd>Price A</dd>
  </dl>

  <ul class="details">
    <li>Image A</li>
  </ul>
</div>

jQuery

$(document).ready(function(){
  $('div').click(function() {
    var then = $(".details", this)
    $(then).toggle();
    $(".details:visible").not(then).hide();
  });
});

Maverick、David Thomas、j08691 和 Tushar Gupta 等人给出的答案非常有效，使用 parent.siblings ，但最初我尝试使用这样的复合:

$('div dl dt').click(function(){ 

但这行不通。我认为这与 var 有关。

但请记住，我确实需要这个，当其他开关打开时开关关闭，当单击“缩略图 A”等时开关自行关闭，依次类推，即 dt ，不是div .

该化合物本身就可以正常工作，但它现在是我想要实现的目标。这是原始的。

fiddle

http://jsfiddle.net/pandaktuai/v46zA/

这里的困惑变量可以实现我所需要的，但是单击只能选择最外层的元素，即父元素( div )。

fiddle

http://jsfiddle.net/pandaktuai/Jeb86/

我希望我已经表达了对这个问题的最低限度的理解，如果大家能帮助我，我将非常感谢。谢谢。

Answer 1

只需将你的 js 修改为此即可

$(document).ready(function(){
$('dt').click(function(){

 var then = $(this).parent().siblings(".details");
 $(then).toggle();
 $(".details:visible").not(then).hide();
});

});

示例:http://jsfiddle.net/Jeb86/1/