使用 Jquery 的 slideToggle 表行

Question

我已经尝试了一个多星期来在单击“更多信息”按钮时滑动切换表格行，但似乎根本没有任何效果。

我是 Jquery 的新手，所以如果有人可以帮我滑动切换 'more-info-1'、'more-info-2'、'more-info-3' tr 标签。主要问题是这些 id 是通过 php 动态创建的，我不明白如何在 Jquery 中选择它们——比如使用“more-info-”之类的。

我希望它像这个例子一样工作： Here 当然减去 iframe。

用户将单击“更多信息”按钮，然后“更多信息-”tr 将向下滑动。

这是页面源代码：（我不知道如何在 Stack OverFlow 上正确插入 HTML，是否有特殊的方法 - 代码按钮无法正常与 HTML 一起使用）

    html

div id="output-listings"

    div class="main-info"

        table class="listings"

            tbody

                    tr id="more-info-1" class="mi-1"

                        td

                        div id="more-1" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-1"

                        tdLeftlane News/td

                        tdwww.leftlanenews.com//td

                        tda id="link-1" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-2" class="mi-2"

                        td

                        div id="more-2" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-2"

                        tdMotor Authority/td

                        tdwww.motorauthority.com/ /td

                        tda id="link-2" class="more-info-link" href="#"More info/a/td

                    /tr

                    tr id="more-info-3" class="mi-3"

                        td

                        div id="more-3" class="more-information"/div

                        /td

                    /tr

                    tr id="main-info-3"

                        tdAutoblog/td

                        tdhttp://www.autoblog.com//td

                        tda id="link-3" class="more-info-link" href="#"More info/a/td

                    /tr

            /tbody

        /table

    /div

/div!--end output-listings--

/html

非常感谢您的帮助。

Answer 1

由于 jquery 代码通常仅在 DOM 准备好时执行，因此如果您最初不使用 CSS 来隐藏它，您将始终看到 TR，即使只有一毫秒，直到您的 js 代码隐藏它。

所以这里的大多数贡献者可能都回答了你的问题。我想补充一点，您最初可以使用 CSS 隐藏 TR，然后使用 JS 完成剩下的工作。

一个好的经验法则是尝试仅使用 CSS 来获得“默认”页面浏览，然后使用 jquery 代码添加丰富的功能。或者至少我会这样做。

Answer 2

根据您是否需要为元素分配特定 id 用于其他目的，您实际上可以这样做而无需提供单独的 id。

在这个例子中，在加载时，我们首先隐藏所有具有可切换类的 tr。然后我们告诉 jQuery 将 dom 向上跳几级，并隐藏下一个 tr - 这样就不需要调用 id。

为此的示例 jQuery：

$(document).ready(function(){

$("#tableToggle tr.toggleable").hide();

$("#tableToggle .tableToggleButton").click(function(){
    $(this).parent().parent().next('tr').slideToggle();                                                 
});

});

修改表示例：

<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

Answer 3

虽然 craig 的响应有效，但您可以限制您的代码并允许 jquery 在一定范围内抓取您的所有 TR 元素，并按照他的建议解析出 id，等等。

$(".listings tbody tr").each(function(index) {
    // hide by default
    $(this).css({'display': 'none'});


    // set the onclicks
    $(this).click(function() {
      // your dosomething can change your appearance
      dosomething(the_id_you_parse_out);
    });
});

不确定这是否是有效的代码，我只是将它们放在一起，以便您了解如何使用 jquery 选择器的要点。

Answer 4

要使 trs 不可见，请将 style='display:none' 添加到它们。

Answer 5

乍一看，您似乎想要这样的东西。

$('#link-1').click(function(){
    $('#more-info-1').slideToggle()
})

您还可以通过更改类的设置方式或通过让内部函数解析被点击的链接的数量并将其输入到内部 jQuery 调用中来概括此脚本以使用所有三个：

$('.more-info-link').click(function(){
    var id = $(this).attr('id');
    var num = id.substr(id.length-1,1);
    $('#more-info-'+num).slideToggle();
})