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。< / p>

单独使用该化合物可以正常工作，但现在我想实现的目标。这是最初的原因。

小提琴

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

这里的乱码变量实现了我的需要但是，点击只能选择最外层的元素，即父级，（div）。

小提琴

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/

Answer 2

我个人建议：

$(document).ready(function () {
    // selecting the 'dt' element(s),
    // using the 'click()' method to handle the 'click' events:
    $('dt').click(function(){
        // moving up through the ancestors to find the first ancestor 'div'
        // finding the '.details' element(s) within that 'div' ancestor
        // toggling its visibility (hiding if it's visible, showing if it's hidden):
        $(this).closest('div').find('.details').toggle();
    });
});

JS Fiddle demo

如果按照建议（在下面的评论中）{{3}}，则需要点击显示一个 .details元素才能隐藏其他元素（以及切换其中的可见性相关的.details元素）：

$(document).ready(function () {
    $('dt').click(function(){
        var target = $(this).closest('div').find('.details').toggle();
        $('.details').not(target).hide();
    });
});

by j08691

参考文献：

Answer 3

尝试：

$(document).ready(function () {
    $('dt').click(function () {
        var then = $(this).parent().siblings(".details");
        $(this).parent().next().toggle();
        $(".details:visible").not(then).hide();
    });
});

<强> jsFiddle example

Answer 4

DEMO

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

切换节目隐藏其他人使用儿童或复合，而不是父母？

4 个答案: