使用Jquery的slideToggle表行

Question

我已经尝试了一个多星期了，当点击“更多信息”按钮时，我会尝试slideToggle一个表格行，但似乎什么都不起作用。

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

我希望它像这个例子一样工作:当然，Here去掉了iframe。

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

下面是页面源代码：(我不知道如何在Stack OverFlow上正确地插入超文本标记语言，有没有特殊的方法--代码按钮在超文本标记语言中无法正常工作)

    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‘。