jquery - 无法通过单击使 SlideToggle 正常工作

Question

https://jsfiddle.net/xdehhkdk/4/

我研究这个问题有一段时间了，最​​后来到 stack 寻求一些帮助。

我的目标是能够让用户单击某人的名字，然后向下滑动其相应的个人简介，这确实有效。

问题是，当您再次单击它时，简介应该会滑回来。相反，它只是再次滑落。现在我意识到这可能是因为我有

$('.expanded-bio').hide();

在点击函数中，但删除该行并不能帮助解决我的问题。我仍然需要在相同的点击功能中以某种方式隐藏其他生物。

非常感谢任何帮助!

Answer 1

您需要将单击的 .expanded-bio 排除在最初隐藏之外。

$('.expanded-bio').hide();

$('.management-member').click(function() {
  // remove active class from other elements
  $('.management-member.active').not(this).removeClass('active');
  // toggle active class of clicked element
  $(this).toggleClass('active');
  // craete the corresponding `.expanded-bio`  object of clicked
  var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
  // hide other `.expanded-bio`
  $('.expanded-bio').not(thisBio).hide();
  // toggle the corresponding
  thisBio.slideToggle('fast');
});

$('.expanded-bio').hide();

$('.management-member').click(function() {
  $('.management-member.active').not(this).removeClass('active');
  $(this).toggleClass('active');
  var thisBio = $('.expanded-bio[data-bio=' + this.id + ']');
  $('.expanded-bio').not(thisBio).hide();
  thisBio.slideToggle('fast');
});

.management-member {
  background: white;
  border: 2px black dashed;
  padding: 20px;
  margin: 0 20px 20px;
  width: 100px;
  float: left;
}
.management-member:hover {
  cursor: pointer;
}
.expanded-bio {
  background: lightgreen;
  clear: both;
  margin-bottom: 10px;
  padding: 20px;
}
.BAD .expanded-bio {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="management-member active" id="hdean">
  <span class="active-overlay"></span>
  <div class="management-info">
    <h3 class="management-title">Holly D. Deem, CFA</h3>
  </div>
</div>

<div class="management-member active" id="jsmith">
  <span class="active-overlay"></span>
  <div class="management-info">
    <h3 class="management-title">John Smith</h3>
  </div>
</div>

<div class="row">
  <div class="large-12 columns expanded-bio bio-row" data-bio="hdean" style="display: block;">
    <h3 class="management-title">Holly D. Deem, CFA</h3>
  </div>
</div>

<div class="row BAD">
  <div class="large-12 columns expanded-bio bio-row" data-bio="jsmith" style="display: block;">
    <h3 class="management-title">John Smith</h3>
  </div>
</div>