Javascript 使用fadeToggle+；当有一组div时，将所有其他的都淡入淡出

我在一个名为：“people”
每个div称为“人物框”
在每个“人物框”中，我有一个名为：“人物描述”

这将描述我的层次结构：

<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> 

但是，只有当我在同一个div上单击以显示描述，然后再次单击以隐藏它时，这才起作用。 如果显示了说明，并且我正在单击另一个“人员框”，则显示的说明不会褪色。
我想这也是工作（切换描述点击相同的div） 但是，当移动到另一个“人物框”时，我想淡出所有其他打开的框

将感谢任何解决方案

---

谢谢

通过执行以下操作淡出所有描述

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

全部

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

500毫秒是可选的，如果需要，请更改它

更新：

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

---

如果我理解正确

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

---

通过执行

$（“.people description”）.fadeOut（）

可以隐藏所有描述，然后只需淡入当前已单击的描述，您已经拥有代码，这将导致您单击的描述淡出两次。您可能希望执行类似于

$（'.people box'）。而不是（this）。查找（'.people description'）。淡出（500）而不是漂亮地工作@Huangism！非常感谢。Hi@Huangism一个简单的问题：它工作得很好，但是，当“人物描述”打开时，那里有文本和电子邮件。当我点击它时，它会消失，不管怎样，要让这个功能以它的方式运行，除了当我悬停或点击打开的“人物描述”框？Thanks@gilhamer有一种方法可以防止这种情况发生，但如果不了解html的结构，就很难说如何编写代码。使用当前标记和js询问另一个问题。很快就会有人回复“Shi@Huangism我有了一个真正的链接，如果它能让事情变得更简单的话——好心地，点击那里的一个人，试着选择文本或通过点击电子邮件发送电子邮件，看看会发生什么。如果你能帮忙，那就太好了。谢谢你的回答也行！只是底部的代码比我需要的多一点。谢谢！
$('.people-box').click(function () {
  $this = $(this).find('.people-description');
  $('.people-description').not($this).fadeOut(500);
  $this.fadeToggle(500);
})