Question

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

我已经研究了这个问题一段时间了，最后来堆叠寻求帮助。

我的目标是能够让用户点击某人的名字，然后向下滑动他们相应的生物片段。

问题是当你再次点击它时，生物应该向上滑动。相反，它只是再次向下滑动。现在我意识到这可能是因为我有

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

单击

1 个答案: