Question

我正在尝试制作一个可折叠的面板。下面的代码是我与我的桌子最接近的代码，但是当我再次折叠它时，<td>显示堆叠（仅在Firefox中）和Chrome中的数据<td>折叠后的宽度不正确。

还可以重复切换图像吗？像折叠时名称表中的绿点和关闭时的红点一样？

以下是代码：

<?php
include "config/tabelwidth.php";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>


<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");
      $("td.subs", $(this).parent()).slideToggle("fast");
   });
});

</script>                                                               


<table border="1px" width="<?php echo $width."px"?>">
    <tr class="header">
        <td width="<?php echo $width1."px"?>">naam</td>
        <td width="<?php echo $width2."px"?>" class="subs">subs</td>
        <td width="<?php echo $width3."px"?>" class="subs">subs</td>
        <td width="<?php echo $width4."px"?>" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="<?php echo $width1."px"?>">data1</td>
        <td width="<?php echo $width2."px"?>">data2</td>
        <td width="<?php echo $width3."px"?>">data3</td>
        <td width="<?php echo $width4."px"?>">data4</td>
    </tr>
</table>

修改：

好，所以更新我的jQuery工作了！：）

我真的很想在这里看到那些乐于助人的人，似乎jQuery是一个非常好的学习^^

如果我可以问你们在哪里学习jQuery？

最后我的问题的最后一部分..

让我说我想要一个箭头指向下方的图像（名称：arrowdown），如果隐藏箭头指向右边（名称：arrowright）你们怎么修复那个？ ; o：）

Answer 1

您提出的几乎所有问题都可以通过一些CSS规则和一个非常简单的jQuery切换来完成。我在此处发布了一个示例：http://jsfiddle.net/2BbUw/

基本要点是你创建了CSS规则，它只强制第一行的第一个子项在.collapsed模式下可见 - 然后使用jQuery在表本身上切换.collapsed标记。

然后jQuery变得非常简单：

$(document).ready(function () {
    $('table.collapsible tr:first-child').on('click', function(ev) {
        $(ev.target).closest('table.collapsible').toggleClass('collapsed');
    });
});

// note that the above only works in later versions of jQuery, due to .on()
// If you are using an earlier version of jQuery, replace .on() with .bind()

处理程序仅指向tr:first-child（表中的第一行）。因为这是基于CSS选择器的，所以它也会自动应用于页面中的所有.collapsible表。

CSS稍微复杂一些，因为它使用了一系列伪选择器：

table.collapsible {
    width: 400px;
    border: 1px solid #666;
    margin: 5px;
    position: relative;
}

table.collapsible td {
    padding: 5px;
}
table.collapsible tr:first-child td:first-child {
    text-indent: 15px;
}

table.collapsible.collapsed tr:not(:first-child),
table.collapsible.collapsed tr:first-child td:not(:first-child) {
    display: none;
}

对于您要求的指标 - 我会提出以下几点内容。请注意，这有点粗糙，但同样 - 一个纯CSS解决方案（在浏览器中意味着非常快）。

table.collapsible::before {
    content: '';
    border: none;
    position: absolute;
    left: 5px; top: 12px;
    height: 10px; width: 10px;
    border-radius: 5px;
    background-color: green;
}
table.collapsible.collapsed::before {
    background-color: red;
}

我认为你会发现这适用于所有浏览器 - 由于所有的CSS切换都非常快 - 并且使用非常简单的jQuery处理你要求的各种事情。

Answer 2

在Firefox 16和谷歌浏览器22中测试工作正常（如果有任何不同，则摆脱px） - Fiddle 如果这有任何不同，我摆脱了px。

<table border="1px" width="400px">
    <tr class="header">
        <td width="100">naam</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
        <td width="100" class="subs">subs</td>
    </tr>
    <tr class="child">
        <td width="100">data1</td>
        <td width="100">data2</td>
        <td width="100">data3</td>
        <td width="100">data4</td>    
    </tr>
</table>

理想的解决方案是创建一个CSS精灵并切换其背景位置

修改

升级你的jQuery，我发现你正在使用jQuery 1.3.2，并且有一个错误，它将<tr>显示属性设置为block而不是table-row

debug

可折叠的表bug jquery

2 个答案:

修改