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/