jQuery - 表格上的手风琴效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9026867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Accordion Effect on a Table
提问by user965879
I'm having difficulty implementing an accordion effect on three different tables using jQuery and I could use some assistance. Right now it works o.k. When I click on the header rows the subsequent rows show, but I'd like some type of animation. I'd also like to have the first table show completely, but I'm a newbie and this is above my head.
我无法使用 jQuery 在三个不同的表上实现手风琴效果，我可以使用一些帮助。现在它工作正常当我点击标题行时，随后的行显示，但我想要某种类型的动画。我也想完全展示第一张桌子，但我是新手，这在我的头上。
Here is my HTML.
这是我的 HTML。
<table class="research">
<tbody>
<tr class="accordion">
<td colspan="3">This is the header</td>
</tr>
<tr>
<td>Research</td>
<td>Description</td>
<td>Partner</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</tbody>
</table>
<table class="research">
<tbody>
<tr class="accordion">
<td colspan="3">This is the header</td>
</tr>
<tr>
<td>Research</td>
<td>Description</td>
<td>Partner</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</tbody>
</table>
<table class="research">
<tbody>
<tr class="accordion">
<td colspan="3">This is the header</td>
</tr>
<tr>
<td>Research</td>
<td>Description</td>
<td>Partner</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</tbody>
</table>
And here is my jQuery:
这是我的 jQuery：
$(function() {
$(".research tr:not(.accordion)").hide();
$(".research tr:first-child").show();
$(".research tr.accordion").click(function(){
$(this).nextAll("tr").toggle();
});
});
回答by Jasper
$(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);animates the display of the elements rather than just showimg/hiding them.
.fadeToggle(500);动画元素的显示，而不仅仅是显示/隐藏它们。
.eq(0).trigger('click');triggers a click on the first header so that it's content will be shown when the page loads.
.eq(0).trigger('click');触发对第一个标题的单击，以便在页面加载时显示其内容。
A cool effect to use is slideUp()and slideDown()but it appears as though you can't use them with table rows.
一个很酷的使用效果是slideUp()，slideDown()但看起来好像你不能将它们与表格行一起使用。
Here is a demo: http://jsfiddle.net/Xqk3m/
这是一个演示：http: //jsfiddle.net/Xqk3m/
Update
更新
You can also optimize your code a bit by caching the .researchselector:
您还可以通过缓存.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');
});
In this example I also removed all the string selectors in favor of function selections (e.g. used .not()instead of :not()). The functions for DOM traversal are faster than putting selectors in a string.
在这个例子中，我还删除了所有的字符串选择器，以支持函数选择（例如使用.not()而不是:not()）。DOM 遍历函数比将选择器放入字符串中要快。
Here is a demo: http://jsfiddle.net/Xqk3m/1/
这是一个演示：http: //jsfiddle.net/Xqk3m/1/
Update
更新
And last but not least, if you want it to be an accordion where when you open one section the rest close, here's a solution:
最后但并非最不重要的一点是，如果您希望它成为手风琴，当您打开一个部分时，其余部分关闭，这里有一个解决方案：
$(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);is the important part, it selects all the .accordionelements except for the one that was clicked, then finds the siblings of all the .accordionelements selected and hides them.
$research.find('.accordion').not(this).siblings().fadeOut(500);是重要的部分，它选择.accordion除了被点击的元素之外的所有元素，然后找到所有被.accordion选中元素的兄弟元素并隐藏它们。
Here is a demo: http://jsfiddle.net/Xqk3m/2/
这是一个演示：http: //jsfiddle.net/Xqk3m/2/
回答by theliberalsurfer
i added a fade effect. Check it - http://jsfiddle.net/XE6AG/1/
我添加了淡入淡出效果。检查它 - 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();
});
});
this one is faster - http://jsfiddle.net/XE6AG/2/
这个更快 - 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");
});
});
this one is really really slow - http://jsfiddle.net/XE6AG/3/
这个真的很慢 - 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");
});
});
you could also add easing to it for example - http://jsfiddle.net/XE6AG/4/.
您还可以为它添加缓动，例如 - http://jsfiddle.net/XE6AG/4/。
