在jQuery中展开和折叠表行
Expanding and collapsing table rows in jQuery
这是 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/你把它弄得太复杂了。简单使用$.fn.toggleClass()
和$.fn.toggle()
$('.Complex').click(function () {
$(this).toggleClass("collapsed").nextUntil('tr.Complex').toggle();
});
如果你想要滑动运动,使用$.fn.slideToggle()
而不是$.fn.toggle()
显示或隐藏带有滑动动作的匹配元素。
你在else 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");
}
}
不妨试试: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
相关文章:
- 可以't以编程方式关闭jQuery移动弹出窗口中的可折叠部分
- jQuery折叠选项卡(如果选择相同)
- 如何打开和折叠相同的JQuery手风琴只需点击它
- 如何将垂直选项卡式内容面板更改为具有媒体查询和 jquery 的响应式可折叠面板
- 使用 jQuery UI 折叠面板显示 couchDB 数据库搜索结果时出现问题
- 引导程序 3 折叠面板中的 Jquery 数据表响应插件
- 默认情况下,jQuery 折叠项应在页面加载时折叠
- jQuery展开导航子点击时折叠
- jQuery sidebartToggler需要使用按钮展开和折叠
- jQuery展开/折叠表行在展开时不显示
- jQuery在<TR>TR折叠时标签不起作用
- JQuery UI菜单防止子菜单项折叠
- 默认情况下使用JQuery折叠表行
- jQuery子菜单在折叠时仍然显示下拉菜单
- jQuery与可折叠列表冲突
- 单击手风琴菜单外的链接时折叠jQuery手风琴
- Eclipse -折叠jQuery函数
- 展开/折叠jquery中的所有列表
- 如何禁用和折叠JQuery Accordian的单个标题
- 在可折叠jquery-mobile中添加可动态过滤的控件