Question

我有code，但它无法正常工作。当我有很多主线和副线时，我想隐藏它。谢谢你的帮助。（单击第一行，其中“1”）。我制作了一个视频来说清楚 -

到目前为止我的代码：

$(document).ready(function(){
    $("#report tr:odd").addClass("odd");
    $("#report tr:first-child").show();

    $("#report tr.odd").click(function(){
        $(this).siblings("tr").toggle();
        $(this).find(".arrow").toggleClass("up");
    });

    //$("#report").jExpand();
});

Answer 1

您的HTML无效。您的<div>中不能包含<table>个标记，并且您不能拥有相同id的多个元素。您可以通过将这些表组合到一个表中来完成相同的操作，而不是使用DIV作为句柄直接使用TR：

JS

$(document).ready(function(){

    $(".handle").click(function(){
        $(this)
            .toggleClass('open')
                .nextUntil(".handle")
                    .children()
                    .slideToggle('fast');
    });

});

CSS

table#report {
    width: 100%;
    table-layout:fixed;
}
table#report tbody tr:not(.handle) td{
    display:none
}
table#report tbody tr.handle td:first-child:before {
    content: '>';
    color:gray;
    float:left;
    transition:all 1s;
}
table#report tbody tr.handle.open td:first-child:before {
    transform: rotate(-90deg);
    color:red;
    float:left;
}

http://jsfiddle.net/9gcFJ/

如何用桌子制作手风琴

1 个答案: