在 jQuery 手风琴折叠栏上渲染列？答案

【问题标题】：Render columns on jQuery accordion collapse bars?在 jQuery 手风琴折叠栏上渲染列？
【发布时间】：2013-03-12 18:47:00
【问题描述】：

我正在使用 jQuery 手风琴小部件，因此折叠栏上的文本需要放在 <h3> 标记内。我的折叠栏包含三个独立的相关信息（文件名、大小和日期）。我真的很想在栏的左侧、中间和右侧渲染这三个项目，以便完全折叠的手风琴类似于一个三列表。有什么办法可以做到吗？

我尝试使用float:right（见下文）将文件名单独放在左侧，将大小和日期放在右侧。这不是我想要的，但我认为这是一个合理的妥协。但是，当我展开该部分时，展开的区域只会越过右浮动文本开始的地方，而不是一直穿过页面，这看起来有点奇怪。据我所知，它也没有提供将浮动文本左对齐多个条的任何方法，因为它们必须是单独的floats，每个都有自己的宽度。

<h3>
  myfile.xls
  <span style="float:right">153 kB, 03/12/2013</span>
</h3>

接下来，我尝试在前两条数据中添加一些padding-right（如下）。这工作得很好，但我的选择是指定一个固定大小，它不会随着窗口大小而缩小或扩大；或百分比，这不允许我在多个条形图上左对齐中心列或右列。我还尝试在每条数据上加上width:33%，这完全被忽略了。

<h3>
  <span style="padding-right:33%">myfile.xls</span>
  <span style="padding-right:33%">153kB</span>
  03/12/2013
</h3>

我真正想要的是三个等宽的列，每列中的文本左对齐。但是我受限于 jQuery 使用 <h3> 标记来指定折叠栏上发生的内容（我什至尝试了一个内部的 <table> 一行，完全知道它不能在内联元素中工作，但是嘿-我不得不试一试！）。我需要在 IE 8+ 和 Firefox 3+ 上进行这项工作，尽管到目前为止，我尝试过的东西都呈现相同的效果，所以我预计那里不会有太多麻烦（敲木头）。

任何建议将不胜感激！谢谢！

【问题讨论】：

我想我可能已经找到了答案（当然，只要我发布我的问题！）。这是正确的方法吗：而不是
标签来指定我的折叠栏文本，使用
然后
内容？所以现在我可以在“left”
? 中使用

似乎可以工作，尽管我显然仍然需要稍微调整 css，因为列排列不正确（单个表的总宽度不一样，即使我将它们设置为100%）。

标签： jquery accordion

【解决方案1】：

如果我理解正确，您希望折叠栏上有三个相等的列，对吗？看看这个小提琴：http://jsfiddle.net/victmo/f2Scp/ 我想你忘了在你的栏或列中添加display:block。

干杯

【讨论】：

是的，成功了！谢谢！我确实在发布我的问题后的几分钟内找到了其他东西（请参阅我在原始问题之后的评论），但这更干净，不需要直接使用 jQuery 的类 - 老实说，这有点误导 - 为什么条“左”和内容“右”何时垂直呈现？手风琴小部件确实支持其他布局，但默认是垂直的。哦，好吧，我是 jQuery 的新手，总的来说，我对你在短时间内能做的事情印象深刻。感谢您的帮助！

【解决方案2】：

您是否考虑过使用树形表？类似http://ludo.cubicphuse.nl/jquery-treetable/

听起来将已经显示列数据的东西改造成导航控件比尝试修改 jQuery 手风琴更容易。

【讨论】：

感谢您的建议。我的雇主对我们被允许引入的插件非常严格，但我们目前确实有一个 jQuery 树插件的请求（不记得是哪一个，我的一位同事提交了请求）。当获得批准时，我可能会尝试这样的事情。它肯定对我们网站的其他区域也很有用。

标签来指定我的折叠栏文本，使用 然后 内容？所以现在我可以在“left” ? 中使用 似乎可以工作，尽管我显然仍然需要稍微调整 css，因为列排列不正确（单个表的总宽度不一样，即使我将它们设置为100%）。

标签来指定我的折叠栏文本，使用
然后
内容？所以现在我可以在“left”
? 中使用

似乎可以工作，尽管我显然仍然需要稍微调整 css，因为列排列不正确（单个表的总宽度不一样，即使我将它们设置为100%）。