jQuery – 手风琴影响表

前端之家收集整理的这篇文章主要介绍了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.f2er.com/jquery/183097.html

猜你在找的jQuery相关文章