使用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中，以避免FOUC加載JS。