Question

我很难使用jQuery在三个不同的表上实现手风琴效果，我可以使用一些帮助。现在它工作o.k.当我点击后续行显示的标题行时，我想要某种类型的动画。我也想完全展示第一张桌子，但我是新手，这是我的头脑。

这是我的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个元素的兄弟元素并隐藏它们。< / p>

以下是演示：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/。

jQuery - 桌上的手风琴效果

2 个答案:

更新

更新