jQuery/HTML/CSS colspan 问题

Question

第一个问题所以放轻松。

我对下面引用的 JSFiddle 有疑问。它涉及 jQuery 与 HTML 表格和 CSS 的交互。

我有“标题”类行，它们是页面加载时显示的唯一行。

单击时，jQuery 会切换下一个元素的可见性，直到找到下一个“header”类对象。

问题是似乎更改了 colspan 设置并且数据仅显示在第一列中。

如果您删除前 7 行 CSS，您会发现它最初会在数据跨越所有列的位置正确加载。

我只用了大约一个月的时间来使用这些东西，所以它都是相当新的......而且可能是糟糕的编码和愚蠢的混合体。

HTML:

<div class="datagrid">
<table align="center">
    <tr class ="header">
        <th>User</th>
        <th>Useremail@domain.com</th>
        <th><span>+</span></th>
    </tr>
    <tr>
    <td colspan="3">
    <ul>
        <li>4G Account</li>
        <li>3G Account</li>
        <li>2G Account</li>
    </ul>
    </td>
    </tr>
    <tr class ="header">
        <th>User1</th>
        <th>Useremail1@domain.com</th>
        <th><span>+</span></th>
    </tr>
    <tr>
    <td colspan="3">
    <ul>
        <li>4G Account</li>
        <li>3G Account</li>
        <li>2G Account</li>
    </ul>
    </td>
    </tr>    
</table>
</div>

CSS:

  tr {
    display: none;
}

tr.header {
    display: table-row;
}
.datagrid table th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
    background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
    background-color:#8C8C8C;
    color:#FFFFFF; font-size: 15px; 
    font-weight: bold; border-left: 1px solid #A3A3A3; } 

jQuery:

var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });

    $(this).nextUntil('tr.header')
    .attr('colspan', 2)
    .slideToggle(100, function () {})

});

http://jsfiddle.net/teHWF/97/

Answer 1

这里有几个问题。

您正在设置 colspan在 <tr> 上，但是 colspan属性只能在 <td> 上设置元素。另外，我不确定将其设置为 2 的目的是什么.这可能是不必要的？

此外，jQuery 的 slideToggle正在设置 css display <tr> 的属性(property)至 block当显示它时，当你真的想要它时 table-row .

这是一个通过切换类来解决这个问题的 fiddle :http://jsfiddle.net/jCW6B/

slideToggle的动画无论如何都没有用，因为设置了height表格行(slideToggle 在幕后所做的)是不合适的。