3

我正在尝试制作一个可折叠的面板。下面的代码是我与表格最接近的代码，但是当我再次将其折叠进出时，<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 :)

4

2 回答 2

2

您所要求的几乎所有内容都可以通过一些 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 处理你要求的各种事情。

于 2012-11-18T20:48:45.183 回答
0

在 Firefox 16 和 Google Chrome 22 中测试工作正常（如果这有什么不同，就去掉 px） - 如果这有什么不同， 我就去掉了小提琴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

调试

于 2012-11-18T20:09:36.793 回答