Question

以下是 jQuery code 的 expanding and collapsing the rows in a table ，但它似乎无法正常工作。我在哪里出错了？

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

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

Answer 2

你在if case之后写了.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

在jQuery中扩展和折叠表行

3 个答案: