jQuery - 表上的手风琴效果

Question

我在使用 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();
    });
  });

Answer 1

$(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/

Answer 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/。