javascript之滑动切换多个具有相同 id 的 div

dflying 阅读：80 2026-05-17 15:37:00 评论：0

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

<!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(); 
    }); 
   });

请您参考如下方法:

那里有很多错误。
例如，表格行中不能有随机的 div，除非它们位于元素内部。

我更正了语法并做了一些改进到您的 JavaScript 代码。
($(this).parents('.collapsible').next('.rest').slideToggle('slow');)

jsFiddle http://jsfiddle.net/q6AmR/

标签:JavaScript

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。