javascript - 在 jQuery 中展开和折叠表格行

Question

这是 jQuery 代码 用于展开和折叠表格中的行 但它只是不似乎不起作用。我哪里出错了吗？

$('.Complex').click(function() {
    if ($(this).hasClass("collapsed")) {
        $(this).nextUntil('tr.Complex')
            .find('td')
            .parent()
            .find('td > div')
            .slideDown("fast", function() {
                var $set = $(this);
                $set.replaceWith($set.contents());
            });
        $(this).removeClass("collapsed");
    } else {
        $(this).nextUntil('tr.Complex')
            .find('td')
            .wrapInner('<div style="display: block;" />')
        $(this).addClass("collapsed");
    }.parent()
        .find('td > div')
        .slideUp("fast");
});

下面是jsFiddle

https://jsfiddle.net/uxc3fkcm/

Answer 1

你把它复杂化了。只需使用 $.fn.toggleClass()和 $.fn.toggle()

$('.Complex').click(function () {
    $(this).toggleClass("collapsed").nextUntil('tr.Complex').toggle();
});

DEMO

如果你想要滑动，那么使用 $.fn.slideToggle()而不是 $.fn.toggle()

Display or hide the matched elements with a sliding motion.