javascript - 使用 Bootstrap 使用折叠/ Accordion 在网格中显示元素

Question

我想显示 3 x 3 元素的网格，这些元素基本上是图像。当用户单击其中任何一个时，我想显示该元素的解释，当用户单击其他内容时，我想折叠该元素的解释并显示被单击元素的解释。我已经使用 Accordion 来列出面板，但在这种情况下，我需要为元素网格做这件事。我正在尝试的一个例子在这里，

http://jsfiddle.net/viggy_prabhu/ychw6/

<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">

其中的问题:1)当我点击9中的任何一个时，所有其他元素都应该是折叠状态。2) 解释应该整行而不是只在列中。

Answer 1

我认为 bootstrap default collapse 不会轻易解决你的问题，而且我认为创建你自己的 collapse block 来做你想做的事会更容易。看看这个 fiddle ，它应该做你想做的:http://jsfiddle.net/tRW9b/

我删除了第三行，但它与第一​​行和第二行几乎相同，我删除了大部分 CSS，但你可以添加任何你想要的，我只想要一个简单的 DOM。

想法是让每一行:

<div class="row">
    <div class="col-xs-4"><a>First button</a></div>
    <div class="col-xs-4"><a>Second button</a></div>
    <div class="col-xs-4"><a>Third button</a></div>
</div>
<div class="row">
    <div class="row collapse"><a>First description</a></div>
    <div class="row collapse"><a>Second description</a></div>
    <div class="row collapse"><a>Third description</a></div>
</div>

然后你只需在链接上添加一个 on('click', ...) (在 fiddle 中，我在每个链接上添加回调，但你只需要稍微修改一下 JS更改它的代码)，然后在回调中你有几种情况:

• 你的链接的目标是可见的=>你只需要隐藏它(使用slideUp，你可以使用其他的东西，比如fadeOut)
• 链接的目标不可见，但同一行上有一个可见目标 => 首先添加可见目标，然后显示目标:visible.slideUp(function () { target.slideDown () });
• 您的链接目标不可见，但另一行有一个目标可见 => 您隐藏可见目标并同时显示您的目标:visible.slideUp() ; target.slideDown() ;

如果没有其他目标可见，最后一种情况也适用，因为 .filter(':visible') 将返回一个空列表。