Question

我正在尝试使用幻灯片切换来显示表单中的符号，如果他们在框外单击，我希望该表单向上滑动。

我的一切运行正常，但我的可见性检查不起作用，因此在表单容器外单击无效。你能发现原因吗？

var loginForm = jQuery("#login .login-form");
jQuery("#login a").click(function(e) {
    e.preventDefault();
    loginForm.slideToggle();

});

// below check isn't working why?
if (jQuery(loginForm).is(":visible")) {
    jQuery("body").click(function() {
        jQuery(loginForm).slideUp();
    });
}

Answer 1

此代码从何处执行？在绑定document处理程序时，您确定click已准备就绪吗？

此外，loginForm变量已包含在jQuery中，无需再次执行此操作：

// Make sure the document is ready for manipulating the DOM:
jQuery( function ( $ ) {
    var loginForm = $( '#login .login-form' );

    $( '#login a' ).click( function ( e ) {
        e.preventDefault();
        loginForm.slideToggle();    
    });

    if ( loginForm.is( ':visible' ) ) {
        $( document ).click( function () {
            loginForm.slideUp();
        });
    }
});

Answer 2

您需要在点击处理程序中进行检查：

jQuery("body").click(function() {
    if (loginForm.is(":visible")) {
        loginForm.slideUp();
    }
});

另外请注意，您不需要在已经是jQuery对象的对象上调用jQuery。无需双重包裹loginForm。

您也希望在登录点击处理程序中event.stopPropagation()，否则点击它会冒泡到正文并触发该处理程序。

jQuery：检查slideToggle可见性不起作用？

2 个答案: