Question

我正在使用bootstrap构建我的投资组合网站。我需要在我的投资组合的图像下添加项目详细信息。当我点击图像时它会上下切换，但如果我点击另一个图像，则第一个div保持可见。我如何使所有其他可见的＆＃34;项目细节＆＃34;当用户使用slideToggle？

点击另一个图像时，div会向上滑动

＆＃13;

$('div.project-detail').hide();

$('img.doug').click(function() {
  $('#dougDet').slideToggle();
});

$('img.ambe').click(function() {
  $('#ambeDet').slideToggle();
});

＆＃13;

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

＆＃13;

Answer 1

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

另请注意，您可以在所有.portfolio-half元素上使用单个事件处理程序并使用data-*属性区分它们来干扰您的代码，如下所示：

＆＃13;

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

＆＃13;

div.project-detail { display: none; }

＆＃13;

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

＆＃13;

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

使用slideToggle时，如何让所有其他div滑回？

1 个答案: