[英]Expanding and collapsing table rows in jQuery
Here is the jQuery code
for expanding and collapsing the rows in a table
but it just doesn't seem to work. 这是用于expanding and collapsing the rows in a table
的jQuery code
,但似乎不起作用。 Am I going wrong anywhere ? 我在哪里出问题了?
$('.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");
});
The following is the jsFiddle 以下是jsFiddle
https://jsfiddle.net/uxc3fkcm/ https://jsfiddle.net/uxc3fkcm/
You have over complicate it. 您太复杂了。 Simply use $.fn.toggleClass()
and $.fn.toggle()
只需使用$.fn.toggleClass()
和$.fn.toggle()
$('.Complex').click(function () {
$(this).toggleClass("collapsed").nextUntil('tr.Complex').toggle();
});
If you want sliding motion then use $.fn.slideToggle()
instead of $.fn.toggle()
如果要滑动,请使用$.fn.slideToggle()
代替$.fn.toggle()
Display or hide the matched elements with a sliding motion. 以滑动方式显示或隐藏匹配的元素。
you have written .parent() after else case and use display none; 您在其他情况之后编写了.parent(),并使用display none; instead of display block; 代替显示块;
$('.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");
}
}
Maybe try This :D 也许试试这个: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();
});
});
worked for me hopefully works for you 2 :D 为我工作,希望为您工作2:D
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.