展开和折叠jQuery的

表行这里是jQuery code为expanding and collapsing the rows in a table，但它似乎没有工作。我哪里错了？展开和折叠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/

来源

2015-06-02 Aishwarya L

你有'语法错误} .parent（）' - https://jsfiddle.net/arunpjohny/p0ujay76/2/- 应该是'$（this）.parent（）' –

感谢您帮助我修复我的代码！（： –

你已经在它复杂化。只需使用$.fn.toggleClass()和$.fn.toggle()

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

DEMO

如果您想滑动然后使用$.fn.slideToggle()代替$.fn.toggle()

显示或隐藏用滑动匹配的元素。

来源

2015-06-02 10:12:57 Satpal

）这样做更清晰，更易于理解！（：非常感谢！（： –

你已经写了.parent（）后面的else case和use 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"); 
    } 
    }

来源

2015-06-02 10:25:55 vinni

）实际上，当表格作为一个整体显示时，这并不适用。 –

也许试试这个：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

来源

2016-04-29 10:10:51

展开和折叠jQuery的

回答

相关问题