Question

我想使用折叠插件在表格行中显示更多细节。即。当用户点击一行中的更多链接时，我想在下一个div中显示元素，该选项应转向更少的内容。点击较少的内容时，必须隐藏所有额外的细节。我怎么能这样做？我的表包含n个行，并且对于每一行，我想使用twitter bootstrap应用此折叠效果我的表格结构更像是

<tr>
    <td>col1</td>
    <td>col2></td>.....
    <td>More column
        <a class='morebtnclass btn btn-info'>View deails..</a>
        <div style="display: none">Div with detailed content about row</div>
    </td>
</tr>

Answer 1

使用 -

<tr>
 <td>col1</td> 
 <td>col2></td>.....
 <td id='div-td-1'>More column
  <a class='morebtnclass btn btn-info' data-toggle="collapse" data-parent="#div-td-1" href=".collapsible" >View deails..</a>
                    <div class="collapsible collapse">Div with detailed content about row</div>
 </td>
</tr>

BTW，通过简单地用firebug或开发者工具诊断Html，找到所需的Html或css类真的不难 -

https://addons.mozilla.org/en-US/firefox/addon/firebug/ - FireFox

https://developer.chrome.com/devtools/index - Chrome

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx - IE

https://developer.apple.com/safari/tools/ - Safari

发布在bootstrap文档中。

http://getbootstrap.com/javascript/#collapse

尝试使用您的编程技巧，这将使您免于将来要求的许多问题.... :)

Answer 2

这并不完全是你要求的，但我认为popover是一种很好的方式来显示/隐藏表格单元格中的长内容，而不会影响表格布局：示例：http://www.bootply.com/Uw4gJbtHte

使用Javascript：

$('.too-long').popover()

HTML：

<td>This</td> <td>That</td> <td> <a href="#" class="btn btn-primary btn-xs too-long" data-content="Lots of details are hidden in this popover! It fits nicely over a table without affecting the layout." data-placement="bottom">Details...</a> </td>

具有动态内容的Twitter-bootstrap崩溃插件

2 个答案: