當點擊標題時展開/摺疊div（切換）

Question

我有以下jQuery代碼來切換div中更多信息的視圖。

$(".expandCollapse").click(function() { 
    var bidValue = this.id, 
    expandArea = $("#"+bidValue+'_status') 
    expandArea.slideToggle(500); 
}); 

該代碼可用於在單擊提交標題時切換顯示更多信息的視圖。 $ moreInfo的div ID是動態創建的。

$moreInfo = $bidValue.''."_status"; 

echo "<div class='expandCollapse' id='$bidValue'>Submission</div>"; 

echo "<div id='$moreInfo'>$displayComments</div>"; 

但是我想一次只打開一個視圖/ div。如果一個div在點擊提交時打開，它應該在另一個打開之前關閉。

我已經嘗試了幾件事情，但它關閉或隱藏所有div。搜索網頁只顯示使用錨標籤的解決方案。

有什麼想法......？

謝謝。

Answer 1

要做到這一點，你可以把一個普通類第二div元素，讓你展示未來，這樣的前隱藏一切：

echo '<div id="$moreInfo" class="expand-area">$displayComments</div>'; 

$(".expandCollapse").click(function() { 
    var bidValue = this.id, 
    expandArea = $("#" + bidValue + '_status').slideToggle(500) 
    $('.expand-area').not(expandArea).hide(); 
}); 

還要注意的是，你可以讓你的代碼更簡單和通用的usnig DOM遍歷選擇的元素，而不是構建選擇串根據相關id屬性，像這樣：

$(".expandCollapse").click(function() { 
    var expandArea = $(this).next('.expand-area').slideToggle(500); 
    $('.expand-area').not(expandArea).hide(); 
}); 

上面的代碼假定元素是兄弟元素，但是您可以輕鬆修改next()以進行遍歷，但是這是必需的。

Answer 2

假設標題和內容的div是兄弟姐妹，你可以使用：

$(.expandCollapse + div)   
// All <div>s that are immediately after an .expandCollapse 

$(".expandCollapse").click(function() { 
 
    var bidValue = this.id, 
 
     expandArea = $("#"+bidValue+'_status') 
 
    expandArea.slideToggle(500); 
 
    $('.expandCollapse + div').not(expandArea).hide(); 
 
}); 
 
$('[id$="_status"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class='expandCollapse' id='bidValue1'>Submission1</div> 
 
<div id='bidValue1_status'>displayComments</div> 
 

 
<div class='expandCollapse' id='bidValue2'>Submission2</div> 
 
<div id='bidValue2_status'>displayComments</div> 
 

 

 
<div class='expandCollapse' id='bidValue3'>Submission3</div> 
 
<div id='bidValue3_status'>displayComments</div>