jQuery-表上的手风琴效果 [英] jQuery - Accordion Effect on a Table
问题描述
我很难使用jQuery在三个不同的表上实现手风琴效果，我可以使用一些帮助.现在可以正常工作当我单击标题行时，将显示随后的行，但是我想要某种类型的动画.我也想完全展示第一张桌子，但是我是新手，这太过头了.
这是我的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>
这是我的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);对元素的显示进行动画处理，而不仅仅是showimg/隐藏它们.
.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/
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.
Here is my 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:
$(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); animates the display of the elements rather than just showimg/hiding them.
.eq(0).trigger('click'); triggers a click on the first header so that it's content will be shown when the page loads.
A cool effect to use is slideUp() and slideDown() but it appears as though you can't use them with table rows.
Here is a demo: http://jsfiddle.net/Xqk3m/
Update
You can also optimize your code a bit by caching the .research selector:
$(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.
Here is a demo: 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 .accordion elements except for the one that was clicked, then finds the siblings of all the .accordion elements selected and hides them.
Here is a demo: http://jsfiddle.net/Xqk3m/2/
这篇关于jQuery-表上的手风琴效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
