Question

我想检查一个切换状态。当我检查浏览器的控制台日志时，可见值为true且不会更改为false。

为什么会这样？我该如何解决？

<html> 
<head>
<script src='~/Scripts/jquery-1.4.1.min.js' type="text/javascript"></script>

<script type="text/javascript">
        $(function () {

            $('#divUpdateForm').click(function () {

                $('#divUpdateContent').slideToggle();

                console.log($('#divUpdateContent').is(":visible"));

            });
        });
</script>
</head>
<body>
<div id="divUpdateForm" runat="server" class="panel" >Update panel state</div>

<div id="divUpdateContent" runat="server">
... my content
</div>
</body>
</html>

Answer 1

您可以在callback功能完成切换后检查切换状态，如：

$('#divUpdateForm').click(function () {

    $('#divUpdateContent').slideToggle(function () {

        // Animation complete.
        if ($(this).is(":visible")) {
            console.log($(this).is(":visible"));
        } else {
            console.log($(this).is(":visible"));
        }
    });
});

FIDDLE DEMO

Answer 2

在滑动元素之前需要检查它，在幻灯片中，元素将始终可见：

$(function () {
    $('#divUpdateForm').click(function () {
        var v = $('#divUpdateContent').is(":visible")


        $('#divUpdateContent').slideToggle();

        // note that the variable v is also accessible here ?
        console.log(v)
    });
});

FIDDLE

检查切换状态

2 个答案: