使用collapse / accordian使用bootstrap显示网格中的项目 [英] Using collapse/accordian for showing items in grid using bootstrap

问题描述

我想显示一个由3×3个项目组成的网格，这些项目基本上是图像。当用户点击其中任何一个时，我想显示该项目的说明，当用户点击其他项目时，我要折叠此项目说明并显示单击的项目的说明。
我使用accordian列表面板，但在这种情况下，我需要做一个网格的项目。
我在这里尝试的一个例子是

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

 < div class = 正在加载data-toggle =collapsedata-parent =＃accordiondata-target =＃collapseOne> 
  

问题：
1）当我单击任何9，应该是折叠状态。
2）解释应该​​是完整的，而不是在列中。

解决方案

我认为引导默认崩溃将不容易为你工作的问题，我认为更容易创建自己的崩溃块来做你想要的。看看这个小提琴，它应该做你想要的： http://jsfiddle.net/tRW9b/ p>

我删除了第三行，但它几乎和第一行和第二行相同，我删除了大多数CSS，但你可以添加任何你想要的，我只是想一个简单的DOM。 / p>

这个想法是为每一行：

 < div class =row> 
< div class =col-xs-4>< a>第一个按钮< / a>< / div> 
< div class =col-xs-4>< a>第二个按钮< / a>< / div> 
< div class =col-xs-4>< a>第三个按钮< / a>< / div> 
< / div> 
< div class =row> 
< div class =row collapse>< a>第一个说明< / a>< / div> 
< div class =row collapse>< a>第二个说明< / a>< / div> 
< div class =row collapse>< a>第三个说明< / a>< / div> 
< / div> 
  

然后你只需要添加一个 你的链接（在小提琴，我添加回调每个链接，但你只需要修改一点JS代码来改变），然后在回调你有几种情况：

• 您的链接的目标是可见=>您只需要隐藏它（使用 slideUp 您可以使用 fadeOut ）


• 您的链接的目标不可见，但在同一行上有可见的目标=>您首先添加可见的目标，然后显示您的目标： visible.slideUp（function（）{ta​​rget.slideDown（）}）;


• 您的链接的目标不可见，但有一个目标可见在另一行=>您隐藏可见目标并同时显示您的目标： visible.slideUp（）; target.slideDown（）;

如果没有其他目标可见， .filter（'：visible'）将返回一个空列表。

I want to show a grid of 3 by 3 items which are basically images. When a user clicks any one of them, I want to show an explanation for that item and when the user clicks something else, I want to collapse this item explanation and show the explanation of the item which is clicked. I have used accordian for listing panels but in this case I need to do it for a grid of items. An example of what I am trying is here,

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

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

Issues in it: 1) When I click any of the 9, all other items should be collapsed state. 2) The explanation should come in full row instead of just in the column.

解决方案

I think bootstrap default collapse won't easily work for you problem, and I think it's easier to create your own collapse block to do what you want. Look at this fiddle, it should do what you want: http://jsfiddle.net/tRW9b/

I removed the third row but it's almost the same as first and second row, and I remove most CSS but you can add whatever you want, I just wanted a simple DOM.

The idea is to have for each row:

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

Then you just add a on('click', ...) on your link (in the fiddle, I add callback on every link, but you just need to modify a bit the JS code to change that), then in callback you have several cases:

• The target of your link is visible => You only need to hide it (using slideUp, you can use something else like fadeOut)
• The target of your link is not visible, but there is a visible target on same row => You first add the visible target, then you show your target: visible.slideUp(function () { target.slideDown() });
• The target of your link is not visible, but there is a target visible on another row => You hide the visible target and show your target simultaneously: visible.slideUp() ; target.slideDown() ;

The last case also works if there is no other target visible since the .filter(':visible') will return an empty list.

这篇关于使用collapse / accordian使用bootstrap显示网格中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！