jQuery – 对表的手风琴效果
我在使用jQuery在三个不同的表上实现手风琴效果时遇到困难，我可以使用一些帮助。 现在它工作正常当我点击后续行显示的标题行时，我想要某种类型的动画。 我也想完全展示第一张桌子，但我是新手，这是我的头脑。
这是我的HTML。
This is the header Research Description Partner Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This is the header Research Description Partner Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
This is the header Research Description Partner Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
这是我的jQuery：
$(function() { $(".research tr:not(.accordion)").hide(); $(".research tr:first-child").show(); $(".research tr.accordion").click(function(){ $(this).nextAll("tr").toggle(); }); });
$(function() { $(".research tr:not(.accordion)").hide(); $(".research tr:first-child").show(); $(".research tr.accordion").click(function(){ $(this).nextAll("tr").fadeToggle(500); }).eq(0).trigger('click'); });
.fadeToggle(500); 激活元素的显示而不仅仅是显示/隐藏它们。
.eq(0).trigger('click'); 触发第一个标题的点击，以便在页面加载时显示内容。
一个很酷的效果是使用slideUp()和slideDown()但看起来好像你不能将它们与表行一起使用。
这是一个演示： http ： //jsfiddle.net/Xqk3m/
更新
您还可以通过缓存.research选择器来优化您的代码：
$(function() { var $research = $('.research'); $research.find("tr").not('.accordion').hide(); $research.find("tr").eq(0).show(); $research.find(".accordion").click(function(){ $(this).siblings().fadeToggle(500); }).eq(0).trigger('click'); });
在这个例子中，我还删除了所有字符串选择器，以支持函数选择（例如，使用.not()而不是:not() ）。 DOM遍历的函数比将选择器放在字符串中要快。
这是一个演示： http ： //jsfiddle.net/Xqk3m/1/
更新
最后但并非最不重要的是，如果你想让它成为一个手风琴，当你打开一个部分，其余部分关闭时，这是一个解决方案：
$(function() { var $research = $('.research'); $research.find("tr").not('.accordion').hide(); $research.find("tr").eq(0).show(); $research.find(".accordion").click(function(){ $research.find('.accordion').not(this).siblings().fadeOut(500); $(this).siblings().fadeToggle(500); }).eq(0).trigger('click'); });
$research.find('.accordion').not(this).siblings().fadeOut(500); 是重要的部分，它选择除了被点击的元素之外的所有.accordion元素，然后找到所有选择的.accordion元素的兄弟元素并隐藏它们。
这是一个演示： http ： //jsfiddle.net/Xqk3m/2/
我添加了淡化效果。 检查一下 – http://jsfiddle.net/XE6AG/1/
$(function() { $(".research tr:not(.accordion)").hide(); $(".research tr:first-child").show(); $(".research tr.accordion").click(function(){ $(this).nextAll("tr").fadeToggle(); }); });
这个更快 – http://jsfiddle.net/XE6AG/2/
//this is fast $(function() { $(".research tr:not(.accordion)").hide(); $(".research tr:first-child").show(); $(".research tr.accordion").click(function(){ $(this).nextAll("tr").fadeToggle("fast"); }); });
这个真的很慢 – http://jsfiddle.net/XE6AG/3/
//this is fast $(function() { $(".research tr:not(.accordion)").hide(); $(".research tr:first-child").show(); $(".research tr.accordion").click(function(){ $(this).nextAll("tr").fadeToggle("fast"); }); });
你也可以添加缓动，例如 – http://jsfiddle.net/XE6AG/4/ 。