Question

我想要显示一个由3个项目组成的网格，这些项目基本上都是图像。当用户点击其中任何一个时，我想显示该项目的解释，当用户点击其他内容时，我想要折叠此项目说明并显示所单击项目的说明。我使用手风琴来列出面板，但在这种情况下，我需要为一个项目网格做。我正在尝试的一个例子是

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默认崩溃不会轻易解决你的问题，我认为创建你自己的崩溃块更容易做你想做的事情。看看这个小提琴，它应该做你想做的事：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', ...)（在小提琴中，我在每个链接上添加回调，但你只需要修改一下JS代码来改变它），然后在回调中你有几个例：

您的链接目标是可见的=＆gt;您只需隐藏它（使用slideUp，您可以使用其他内容，例如fadeOut）
您的链接目标不可见，但同一行上有一个可见目标=＆gt;您首先添加可见目标，然后显示目标：visible.slideUp(function () { target.slideDown() });
您的链接目标不可见，但另一行显示目标=＆gt;您隐藏可见目标并同时显示目标：visible.slideUp() ; target.slideDown() ;

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

使用折叠/手风琴使用引导程序在网格中显示项目

1 个答案: