Question

我最近用Jquery找到了这个可扩展的表，它非常轻量级且代码很棒。但是，我需要对它做一些小改动，但我不知道如何。当你从第一行到第二行，第三行，第四行等等时，你看一下这个demo。该行只是继续扩展，而不是我需要活动行来收缩。这意味着，当用户从点击第一行转到第二行时，则前一个合同..

我希望很清楚，我会提供代码，但你可以看到源代码，它很整洁，Here是完整的教程。

感谢。

好的，这是Jsfiddle中的代码：

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

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

Answer 1

将您的点击处理程序更改为此处，在展开所选单词之前收集所有内容：

$("#report tr.odd").click(function() {
    if ($(this).next("tr").is(":visible")) {
        $(this).next("tr").hide();
        $(this).find(".arrow").removeClass("up");
    } else {
        $("#report tr:not(.odd)").hide();
        $(".arrow").removeClass("up");
        $(this).next("tr").show();
        $(this).find(".arrow").addClass("up");
    }
});

请参阅fiddle

Answer 2

这是一种方法，但我觉得它可以稍微简化一下：

$('#report tbody tr:nth-child(odd)').addClass('odd');
$('#report tbody tr:nth-child(even)').addClass('even').hide();
$('tr.odd').click(
    function(){
        var that = $(this),
            next = that.next('.even');
        that.find('.arrow').toggleClass('up');
        next.toggle().siblings('.even').hide();
        $('.even:not(":visible")').each(
            function(){
                $(this).prev('.odd').find('.up').removeClass('up');
            });
    });

JS Fiddle demo

参考文献：

如何使此脚本执行其他功能

2 个答案: