javascript - 当有一组 div 时使用 fadeToggle + 淡出所有其他内容

Question

我在一个容器 div 中有一组 div，名为:“people”。
每个 div 称为“people-box”
在每个 "people-box" 内，我有一个名为:"people-description"

这将描述我的层次结构:

<div class="people">

  <div class="people-box">
    <div class="people-description"></div>
  </div>

  <div class="people-box">
    <div class="people-description"></div>
  </div>

  <div class="people-box">
    <div class="people-description"></div>
  </div>

</div> 

我想在这里触发操作:
当有人点击“people-box”div 时，我想淡入淡出切换描述，只需显示和隐藏

它正在使用此方法工作:

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

});

但是，只有当我在同一个 div 上单击以显示描述并再次单击以隐藏它时，这才有效。 如果显示了描述并且我点击了另一个“people-box”，它不会使显示的那个消失。
我也希望这样工作(点击同一个 div 切换描述) 而且当移动到另一个“people-box”时，我想淡出所有其他打开的

将不胜感激任何解决方案
谢谢

Answer 1

通过执行淡出所有描述

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