使用图像作为触发器的jquery折叠

wn9m85ua 于 2022-11-29 发布在 jQuery

关注(0)|答案(3)|浏览(125)

我有一个简单的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>

我做了一些搜索，但我不确定这是否可能？
任何想法或提示都会很棒。
谢谢

jquery

来源：https://stackoverflow.com/questions/16539027/jquery-collapse-using-image-as-trigger

3条答案

按热度按时间

0x6upsns1#

试试这个：

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

赞(0）回复(0）举报 2022-11-29

yk9xbfzb2#

而不是不必要的id等，我会处理它作为

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

$(this).closest('table')搜索您单击的元素的父元素，如果它不是表，则搜索此元素的父元素，依此类推，直到父元素是表，然后find搜索不是第一个子元素的每个tr，并切换它。
这允许需要切换的多行数据，而不会到处发送id和类。

赞(0）回复(0）举报 2022-11-29

ipakzgxi3#

我已经更新了一些更好的做法，如使用头部/ tbody和 Package 在一个锚图像。
但是你有没有意识到，如果按钮在标题里面，你就不能再点击它了。这是你的意思还是我误会了？
http://jsfiddle.net/t4b7X/

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

赞(0）回复(0）举报 2022-11-29

我来回答

使用图像作为触发器的jquery折叠

3条答案

相关问题

热门标签

最新问答