无法通过单击使 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>

无法通过单击使 slideToggle 正常工作

Cannot get slideToggle to work properly with click

jquery

click

slidetoggle

slidedown