Question

我使用show hide幻灯片切换来隐藏我的登录面板。当我点击LogIn按钮时，它会显示，当我再次单击logIn按钮时，它会隐藏，但我希望当我单击它显示的logIn按钮时，当我单击身体中的任何位置时它会自动隐藏。

<script src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#showmenu').click(function() {
            $('.login-wrapper').slideToggle();
    });
});
</script>

Answer 1

将click事件绑定到文档对象

$(document).ready(function () {
    $('#showmenu').click(function (e) {
        $('.login-wrapper').stop(true).slideToggle();
    });
    $(document).click(function (e) {
        if (!$(e.target).closest('#showmenu, .login-wrapper').length) {
            $('.login-wrapper').stop(true).slideUp();
        }
    });
});

演示：Fiddle

Answer 2

您可以在文档级别添加.click处理程序，以向上滑动.login-wrapper。

但是当你像那样使用它时，当点击按钮.login-wrapper打开#showmenu时，点击将在DOM树上冒泡并在文档级别触发click事件好吧，最终会再次关闭你的.login-wrapper。

这就是为什么你需要在这里使用e.stopPropagation()来防止冒泡DOM树，这样如果点击按钮就不会关闭.login-wrapper。

$(document).ready(function () {
    $(document).click(function () {
        $('.login-wrapper').slideUp();
    });
    $('#showmenu').click(function (e) {
        e.stopPropagation();
        $('.login-wrapper').slideToggle();
    });
});

<强> Fiddle Demo

根据您的评论，您可以使用：

$(document).ready(function () {
    $(document).click(function () {
        $('.login-wrapper').slideUp();
    });
    $('#showmenu').click(function (e) {
        e.stopPropagation();
        $('.login-wrapper').slideToggle();
    });
    $('.login-wrapper').click(function (e) {
        e.stopPropagation();
    });
});

<强> Updated Fiddle

当我点击身体切换中的任何地方时，jQuery会自动隐藏

2 个答案: