jQuery – 手风琴影响表

我在使用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>
                    </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>
                    </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);动画显示元素，而不仅仅是显示/隐藏它们。

.EQ(0).trigger( ‘点击’);触发点击第一个标题，以便内容将在页面加载时显示。

一个很酷的使用效果是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( ‘手风琴’。)不是(这个).siblings()淡出(500)。是重要的部分，它选择所有的.accordion元素，除了被点击的元素，然后找到所有的.accordion元素的兄弟姐妹，并隐藏它们。

这是一个演示：http://jsfiddle.net/Xqk3m/2/

原文地址：https://www.jb51.cc/jquery/183097.html