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

另请注意，通过使用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

＆＃13;

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

＆＃13;

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

＆＃13;

单击标题

2 个答案: