javascript - 使用slideToggle时，如何让所有其他div向后滑动？

Question

我正在使用 bootstrap 构建我的作品集网站。我需要在我的作品集的图像下添加项目详细信息。当我单击图像时，它会上下切换，但如果我单击另一个图像，第一个 div 仍然可见。当用户使用 SlideToggle 单击另一个图像时，如何使所有其他可见的“项目详细信息”div 向后滑动？

$('div.project-detail').hide();

$('img.doug').click(function() {
  $('#dougDet').slideToggle();
});

$('img.ambe').click(function() {
  $('#ambeDet').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
  <div class="row">
    <img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolio-half doug">
    <img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolio-half ambe">
  </div>
  <div class="project-detail" id="dougDet">
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
  </div>
  <div class="project-detail" id="ambeDet">
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
  </div>
</div>

Answer 1

您可以通过在其他 .project-detail 元素上调用 slideUp() 并切换目标元素来实现所需的目的。

另请注意，您可以通过在所有 .portfolio-half 元素上使用单个事件处理程序并使用 data-* 属性来区分代码，从而使代码变得干燥。他们，像这样:

$('img.portfolio-half').click(function() {
  var $target = $($(this).data('target')).slideToggle();
  $('.project-detail').not($target).slideUp();
});

div.project-detail { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="workBlock" class="portfolio-block fixed-bg dark-bg">
  <div class="row">
    <img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolio-half doug" data-target="#dougDet">
    <img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolio-half ambe" data-target="#ambeDet">
  </div>
  <div class="project-detail" id="dougDet">
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
    <p>doug</p>
  </div>
  <div class="project-detail" id="ambeDet">
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
    <p>ambe</p>
  </div>
</div>

另请注意，我将 .project-detail 元素的隐藏移至 CSS 以避免加载 JS 时出现 FOUC。