Toggle show скрыть других, используя дочерние или составные, а не родительские?

Question

Как получить переключатель show hide от щелчка детей или соединения, а не щелкнуть по родительскому?

Я хочу переключить изображение 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, Дэвид Томас, j08691 и Tushar Гупта довольно действует один с помощью parent.siblings, но изначально я 'Пробовал использовать такое соединение:

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

Но это не сработает. Я считал, что это имеет какое-то отношение к вар.

Но, пожалуйста, имейте в виду, что мне действительно нужно, чтобы переключатель был закрыт, когда другие переключатели открываются и закрываются, когда нажимают на «Эскиз А» и т. Д., То есть dt, а не div.

Соединение само по себе прекрасно работает, но это то, чего я хочу достичь. Здесь идет оригинальная.

Fiddle

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

А вот с запутались переменной, что добиться того, что мне нужно, но щелчок может выбрать только самый внешний элемент, который является родителем, (div).

Fiddle

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

Я надеюсь, что я показал свое минимальное понимание этой проблемы и многом благодаря, если вы можете оказать мне hand.Thanks.

Answer 1

Просто modefy ваши 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

Try:

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

jsFiddle example

Answer 3

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

Answer 4

Я лично предлагаю:

$(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.

Если, как это было предложено (в комментариях ниже) by j08691, это необходимо, что нажатие показывает один.details элемент должен скрыть другие (а также переключая видимость соответствующего .details элемента):

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

JS Fiddle demo.

Ссылки:

• closest().
• not().
• find().
• toggle().