Question

我正在尝试使用JQuery隐藏内部表，其中触发隐藏的元素位于父表中。这是我的代码：

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
    $(".collapsible").click(function(event) {

        event.preventDefault();

        inner = $(this).find(".inner");



        if($(inner).is(":visible") == true) {

            alert("hiding");

            $(inner).hide("slow");

        }

        else {

            alert("showing");

            $(inner).show("slow");

        }

    });

    $(".inner").each(function(index, element) {

        $(this).hide(0);

    });
});
</script>

<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>thing</td></tr><tr><td>another thing</td></tr>
</table>
</table>
<table class='outer'>
<tr><td><a class='collapsible' href='#'>click here</a></td></tr>
<tr><table class='inner'>
<tr><td>something else</td></tr><tr><td>another something else</td></tr>
</table>
</table>
</body>
</html>

有人知道为什么点击“点击这里”不会让内表显示？提前致谢

Answer 1

因为.find()正在.collapsible锚点中查看。您需要先升级到父表，才能正确使用.find()：

$(this).closest("table.outer").find("table.inner");

您的整个代码可以简化为：

$(function() {
    $(".collapsible").click(function(event) {
        event.preventDefault();
        $(this).closest("table.outer").find("table.inner").toggle('slow');
    });

    $(".inner").hide();
});

用JQuery隐藏内部表

1 个答案: