1

How to get toggle show hide from click of children or compound, not the click on parent?

I want to toggle Image A when click on Thumbnail A, not from the click of entire div. Thanks.

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

The answers given from the like of Maverick, David Thomas, j08691 and Tushar Gupta are pretty valid one using parent.siblings, but originally I've tried using compound like this:

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

But it wont work. I reckoned it has something to do with the var.

But please bear in mind I really need that, the toggle close when other toggle open and close itself when click on 'Thumbnail A' and so on, whic is dt, not div.

The compound alone work fine as it is but its now what I want to achieve. Here goes the original one.

Fiddle

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

And here with the mess up variable that achieve what I need but, the click can only select the most outer element, which is parent, (div).

Fiddle

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

I hope I've shown my minimal understanding of this problem and much thanks if you all can lend me a hand.Thanks.

4

4 回答 4

3

只需将您的 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/

于 2013-09-18T16:55:17.460 回答
1

我个人建议：

$(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 小提琴演示。

如果按照j08691的建议（在下面的评论中），则要求单击显示一个 .details元素应该隐藏其他元素（以及切换相关.details元素的可见性）：

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

JS 小提琴演示。

参考：

于 2013-09-18T16:56:58.220 回答
0

尝试：

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

jsFiddle 示例

于 2013-09-18T16:55:16.870 回答
0

演示

$(document).ready(function () {
    $('div').find('dl dt').click(function (e) {
        var then = $(this).closest('div').find(".details");
        $(then).toggle();
        $(".details:visible").not(then).hide();
    });
});
于 2013-09-18T16:56:34.720 回答