0

我有一个简单的 jQuery 可折叠表，其中标题行是切换我想要显示/隐藏的数据的触发器。

我所追求的是在标题行中有一个图像并将其用作触发器，而不是行本身。

这是一个例子：http: //jsfiddle.net/RDybT/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#trigger_1').click(function () { 
          $('#toggle_1', $(this).parent()).toggle();
       });
    $('#trigger_2').click(function () { 
          $('#toggle_2', $(this).parent()).toggle();
       });
     });
</script>

</head>

<body>
<img src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/blue/toggle-expand_blue.png" id="trigger_1"/>
<table border="2" cellpadding="2" cellspacing="2">
    <tr>
        <th>Header </th>
    </tr>
    <tr id="toggle_1">
        <td>Data</td>
    </tr>
</table>

<hr>

<table border="2" cellpadding="2" cellspacing="2">
    <tr>
        <th><img src="http://cdn5.iconfinder.com/data/icons/super-mono-reflection/blue/toggle-expand_blue.png" id="trigger_2"/></th>
    </tr>
    <tr id="toggle_2">
        <td>Data</td>
    </tr>
</table>
</body>
</html>

我已经做了一些搜索，但我不确定这是否可能？

任何想法或提示都会很棒。

谢谢

4

3 回答 3

0

而不是不必要的身份证等，我会接近它

$('#trigger_2').click(function () { 
    $(this).closest('table').find('tr:not(:nth-child(1))').toggle();
});

$(this).closest('table')搜索你点击的元素的父元素，如果它不是一个表，它会搜索这个元素的父元素，依此类推，直到父元素是一个表，然后 find 搜索不是第一个子元素的每个 tr ，并切换它。

这允许需要切换多行数据，而不会到处发送垃圾邮件 id 和类。

于 2013-05-14T09:09:13.770 回答
0

我更新了一些更好的做法，例如使用 thead / tbody 并将图像包装在锚点中。

但是您是否意识到如果按钮位于标题内，那么您将无法再次单击它。这是你的意思还是我误会了？

http://jsfiddle.net/t4b7X/

$(document).ready(function() {
    $('.table-toggle').click(function(event) { 
          $(this).closest('thead').toggle();
          event.preventDefault();
    });
});
于 2013-05-14T09:11:06.327 回答
0

尝试这个 ：

$(document).ready(function() {
    $('#trigger_1').click(function () { 
      $('#toggle_1', $(this).parent()).toggle();
   });
$('#trigger_2').click(function () { 
      $('#toggle_2').toggle();
   });
 });
于 2013-05-14T09:06:20.040 回答