Использование fadeToggle + fade all other при наборе divs

У меня есть набор div внутри одного контейнера div, называемого: "people". каждый div называется "people-box" внутри каждого "ящика для людей" у меня есть div, называемый: "people-description"

Итак, это будет описывать мою иерархию:

<div>

 <div>
 
 </div>

 <div>
 
 </div>

 <div>
 
 </div>

</div>

Я хотел бы активировать действия здесь: когда кто-то нажимает на "people-box" div, я хочу пометить, переключить описание, просто показать и скрыть

он работает с использованием этого метода:

$('.people-box').click(function(){
 $(this).find('.people-description').fadeToggle(500);

});

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

Понадобится любое решение благодаря

2 ответа

Затухайте все описание, делая

$('.people-description').fadeOut(500);

все вместе

$('.people-box').click(function(){
 var $el = $(this).find('.people-description');
 $('.people-description').not($el).fadeOut()
 $el.fadeToggle(500);
});

500 миллисекунд не является обязательным, измените его, если вам нужно

http://jsfiddle.net/65w90pqj/1/

Обновить:

$('.people-box').click(function (e) {
 if (!$(e.target).hasClass('people-description')) {
 var $el = $(this).find('.people-description');
 $('.people-description').not($el).fadeOut()
 $el.fadeToggle(500);
 }
});

http://jsfiddle.net/65w90pqj/2/


Если я правильно понял,

$('.people-box').click(function () {
 $this = $(this).find('.people-description');
 $('.people-description').not($this).fadeOut(500);
 $this.fadeToggle(500);
})

JSFiddle

licensed under cc by-sa 3.0 with attribution.