jquery - jquery 可折叠表错误

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表格本身上的 code> 标记。

然后 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 处理你要求的各种事情。