当点击标题时展开/折叠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>