javascript - 检查页面上当前是否显示 DIV

Question

我正在学习 jQuery，这是我到目前为止的代码:

<script type="text/javascript">
$(document).ready(function(){
    $('#login').click(function(){
        $('#login-box').fadeIn('fast');
    });
});
</script>

它有效，当您单击登录按钮时，页面上会显示名为 login-box 的 DIV。我想要做的是，如果再次单击登录按钮，login-box DIV 将从页面上消失。最好的方法是什么？我在想:

$(document).ready(function(){
    $('#login').click(function(){
        if(login-box-is-showing)
        {
            $('#login-box').fadeOut('fast');
        } else {
            $('#login-box').fadeIn('fast');
        }
    });
});

但是我对如何确定 DIV 是否显示感到困惑。我还看到 jQuery 有一个切换功能，这样会更好吗？

谢谢。

Answer 1

$("#login-box:visible") 会告诉您它是否可见，而 $("#login-box:hidden") 会告诉您是否可见它不是。但是，处理此问题的更简单方法是使用 $.toggle()甚至$.slideToggle()如果您想要一点附加效果。