expand/collapse div（切换）点击 header

Question

我有以下 jQuery 代码来切换 div 中更多信息的视图。

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

该代码用于在单击提交 header 时切换显示更多信息的视图。 $moreInfo 的 div ID 是动态创建的。

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

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

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

但是我一次只想打开一个 view/div。如果 div 在单击提交时打开，则应在打开另一个之前将其关闭。

我尝试了几种方法，但它关闭或隐藏了所有 div。搜索网络仅显示使用锚标记的解决方案。

有什么想法...？

谢谢。

Answer 1

要实现这一点，您可以在第二个 div 元素上放置一个通用的 class，这样您就可以在显示下一个元素之前将它们全部隐藏起来，如下所示：

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();
});

另请注意，通过使用 DOM 遍历 select 元素，而不是构建 select 或基于相关 id 属性，像这样：

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

上面的代码假定元素是兄弟姐妹，但您可以轻松修改 next() 以遍历然而是必需的。

Answer 2

假设 header 和内容 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>

expand/collapse div（切换）点击 header

expand/collapse div (toggle) when clicking on header

php

jquery

slidetoggle