Question

我在一个容器div中设置了div，名为：“people” 每个div称为“people-box”
在每个“people-box”里面我有一个div：“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上点击以显示描述并再次单击以隐藏它时，这才起作用。如果显示说明并且我点击另一个“人员框”，则显示的那个没有消失。
我想这也工作（切换说明点击相同的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/

Answer 2

如果我理解正确，

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

JSFiddle

当有一组div时，使用fadeToggle +淡化所有其他

2 个答案: