0

I recently found this expandable table with Jquery, it is very lightweight and awesome code. However, I need to make small changes to it, but I don't know how. If you take a looks at this demo when you go clicking from the first row to the second, third, fourth...so on. The row just keeps on expanding, instead I need the in-active rows to contract. Meaning, when a user goes from click first row to second, then the previous one contracts..

I hope it is clear, and I would provide the code but you can see the source code, it is neat and Here is the full tutorial.

thanks.

Ok, here is the code in 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();
    });

​</p>

4

2 回答 2

3

Change your click handler to this, which contracts everything before expanding the selected one:

$("#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");
    }
});

See fiddle

于 2012-11-24T15:34:07.233 回答
2

Here's one approach, though I feel it could be somewhat simplified:

$('#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.

References:

于 2012-11-24T15:41:38.633 回答