使用图像作为触发器的jQuery折叠答案

【问题标题】：jquery collapse using image as trigger使用图像作为触发器的jQuery折叠
【发布时间】：2013-05-08 11:44:06
【问题描述】：

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

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

<!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>

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

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

谢谢

【问题讨论】：

标签： jquery show-hide collapse

【解决方案1】：

试试这个：

$(document).ready(function() {
    $('#trigger_1').click(function () { 
      $('#toggle_1', $(this).parent()).toggle();
   });
$('#trigger_2').click(function () { 
      $('#toggle_2').toggle();
   });
 });

【讨论】：

【解决方案2】：

而不是不必要的 id 之类的，我会接近它

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

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

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

【讨论】：

【解决方案3】：

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

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

http://jsfiddle.net/t4b7X/

$(document).ready(function() {
    $('.table-toggle').click(function(event) { 
          $(this).closest('thead').toggle();
          event.preventDefault();
    });
});

【讨论】：