[英]Jquery table accordion multiple expand
i need help with some redesign of my jquery code if someone can help me. 如果有人可以帮助我,我需要一些重新设计我的jquery代码的帮助。 I want to expand multiple categories without sliding out the other ones.
我想扩展多个类别而不滑出其他类别。 Here is my actual code for sliding one table.
这是我滑动一张桌子的实际代码。
Thnx in advance. 提前thnx。
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>
jquery jQuery的
$(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');
});
I would avoid using any tables at all, especially if you're going to be animating elements. 我会避免使用任何表,特别是如果您要设置动画元素。 I would highly recommend using Divs instead!
我强烈建议改用Divs!
Also, avoid at all costs using inline styles, and ESPECIALLY avoid inline width declarations. 另外,不惜一切代价避免使用内联样式,尤其要避免使用内联宽度声明。
Here's the JSFiddle: 这是JSFiddle:
http://jsfiddle.net/Ec3hJ/ http://jsfiddle.net/Ec3hJ/
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="research" width="100%">
<div class="accordion">
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div><a href="" title="Edit">Editati</a> | <a class="a_del" href="" title="Delete">Stergeti</a></div>
</div>
Let me know if that helps move you in the right direction. 让我知道这是否有助于您朝正确的方向前进。 If you are absolutely dead-set to use Tables, it may or may not even work, but you could try converting those Divs back into a table... you shouldn't have to change the CSS or JS.
如果您绝对不愿意使用Tables,那么它可能甚至不能工作,但是您可以尝试将这些Divs转换回表中……您不必更改CSS或JS。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.