-1

我有这张表，其中包含有关其右侧项目的详细信息，我需要将所有单元格放在与最长的宽度完全相同的列中，就像下面的屏幕截图所示：

如果我使用常规表格，这将有效，但现在我需要在其顶部添加手风琴功能，因此当我单击一行时，该行的相关内容将从每个下方滑下。

在表格行之间添加这些内容 div 的唯一方法是将它们包装在<tr>标签中，这不适用于slideDown()andslideUp()效果。

现在我使用标签在小提琴中重新创建了表格<dl>，希望以某种方式使用 CSS 解决这个问题，但没有这样的运气。这是链接： http: //jsfiddle.net/bbDYX/ - 一切正常，除了宽度问题。

我现在能想到的唯一解决方案是使用 JavaScript 遍历每个右侧列上的每个表格单元格，并将它们的宽度设置为与最高宽度单元格相同的值。但如果可以的话，我想避免这种情况。

有任何想法吗？

4

3 回答 3

0

您不能向上滑动<tr>标签，但可以向上滑动<td>标签。不确定这是否适合您，但值得考虑...

$("#somerow").find("td").slideToggle();
于 2013-04-17T19:58:53.763 回答
0

好的，正如我在评论中所说，我会保留表格并为类似手风琴的效果创建一个“自定义小部件”。

事情会很简单，使用 jQuery UI 动画等。

例如，您可以只用四行代码创建一个基本的“描述切换”：

$('.mytable .description').hide();
$('.mytable').on('click', '.title', function(){
    $(this).next('.description').toggle();
});

（当然你可以自定义 .toggle() 通过添加效果类型，持续时间，...）

这是一个工作示例：http: //jsfiddle.net/JAmFh/

于 2013-04-17T20:10:03.483 回答
0

这就是你需要的：myjsfiddle

CSS：

.con1
{
width:100%;
height:50px;
background-color:#F3E2A9; 
}

html:

<table border='0' cellspacing='3' width='100%'>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
<tr bgcolor='lightblue'>
    <td><a href='#' class='open1' >Item</a></td>
    <td>detail 1</td>
    <td>detail 2</td>
    <td>detail 3</td>
</tr>
<tr><td colspan='4'><div class='con1'>con1</div></td></tr>
</table>

脚本：

$('.con1').hide();
$('.open1').click(function() {
    $(this).parent().parent().next().find('.con1').slideToggle();    
    return false;        
});

玩得开心造型...（经过测试）

于 2013-04-17T20:19:40.280 回答