在jQuery中展开和折叠表格行

Question

这是用于expanding and collapsing the rows in a table的jQuery code ，但似乎不起作用。 我在哪里出问题了？

$('.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();
});

演示

如果要滑动，请使用$.fn.slideToggle()代替$.fn.toggle()

以滑动方式显示或隐藏匹配的元素。

Answer 2

您在其他情况之后编写了.parent（），并使用display none; 代替显示块；

$('.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: none;" />')
      $(this).addClass("collapsed");
    } 
   }

Answer 3

也许试试这个：D

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

 $(function () {
     $("td[colspan=3]").find("p").hide();
     $("table").click(function (event) {
         event.stopPropagation();
         var $target = $(event.target);
         $target.closest("tr").nextAll().find("p").slideToggle();

     });
 });

为我工作，希望为您工作2：D