Question

我正在尝试为艺术家创建一个信息表。字段是从数据库动态生成的。如果任何用户点击艺术家姓名，则很少有其他与该艺术家相关的信息显示下来。首先，其余的信息都隐藏起来。

<!doctype html>
   <html lang="en">

<head>
 <meta charset="utf-8" />
 <title></title>
</head>

<body>

<table>
<tr>
    <td>Artist Name</td>
    <td>Birth Year</td>
    <td>Age</td>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">A</a></h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">B</a><h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
</tr>
<tr id="collapsible">
    <td><h2><a href="" id="check-details">C</a><h2></td>
    <td>1988</td>
    <td>26</td>
    <div id="rest">
        <tr>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah</td>
        </tr>
    </div>
  </tr>
  </table>

  </body>

  </html>

Jquery的

            $(document).ready(function(){

    // hide all div containers
    $('collapsible#rest').hide();
    // append click event to the a element
    $('#check-details').click(function(e) {
        // slide down the corresponding div if hidden, or slide up if shown
        $(this).parent().next('#rest').slideToggle('slow');
        // set the current item as active
        $(this).parent().toggleClass('active');
        e.preventDefault();
    });
   });

Answer 1

你有很多错误。
例如，你不能在表格行中有随机div，除非它们在元素内部。

我纠正了语法并对您的javascript代码进行了一些改进。
（$(this).parents('.collapsible').next('.rest').slideToggle('slow');）

左右http://jsfiddle.net/q6AmR/

Answer 2

$(this).parent()

不正确，您的标签位于h2，这是它的父母，您必须这样做

$(this).parent().parent().parent()

返回包含div的tr。

此外，在tr中使用div是格式不正确的HTML，就好像在tr中有tr一样。

我建议将HTML更改为：

<table>
    <tr>
        <td><a href="" class="artistLink">Katy Perry</td>
        <td></td>
        <td></td>
    </tr>
    <tr class="rest">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

<script>
    $("tr.rest").hide();

    $("a.artistLink").click(function(e) {
        $(this).parent().parent().next("tr.rest").slideToggle();
        ...
    });
</script>

这是写在我的iPad上所以可能需要调整！

slidetoggle具有相同ID的多个div

2 个答案: