使用jQuery的slideToggle表行

Question

我已经尝试了一个多星期，当单击“更多信息”按钮时，要滑动切换表格行，但是似乎什么也没有。

我是Jquery的新手，所以如果有人可以帮助我slideToggle'more-info-1'，'more-info-2'，'more-info-3'tr标签。 主要问题是这些ID是通过php动态创建的，我不知道如何在Jquery中选择它们-就像使用“ more-info-”之类的东西一样。

我希望它像以下示例一样工作：当然， 这里要减去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

尽管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 2

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

$('#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();
})

Answer 3

为了使trs不可见，请向其添加style ='display：none'。

Answer 4

根据是否需要为另一个目的为元素分配特定的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 5

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

因此，这里的大多数贡献者都可能回答了您的问题。 我想补充一下，您可以首先使用CSS隐藏TR，然后使用JS完成其余的工作。

一个好的经验法则是，尝试仅通过使用CSS来获取“默认”网页浏览量，然后在jquery代码中添加丰富的功能。 或者至少那是我要做的。