jquery - 失去焦点时隐藏分区

Question

在下面的屏幕截图中，您将看到一个大的绿色矩形。单击“我的帐户”链接时会显示此分区。然后可以通过单击“隐藏”图像来隐藏它。

屏幕截图: http://knowwhovotes.com/somecap.JPG

如果用户单击该区域之外的任何位置，我希望隐藏绿色区域。我尝试过模糊功能，但无法正常工作。

这是我已经有了的代码:

<script>
$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
});
</script>

Answer 1

首先，焦点/模糊通常仅适用于 input 元素。它们不会针对 div 元素触发。

您需要在单击文档时隐藏 div，但在单击 div 本身或任何内容时则不需要在里面。为此，请向文档添加一个点击处理程序，然后停止在 DOM 树上传播 div 上的点击，如下所示:

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });
    $("#hide_account").click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });

    $(document).click(function() {
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    });
    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

然后您可能想要合并隐藏代码并将其放入公共(public)函数中:

$(document).ready(function() {
    $("#my_account_button").click(function() {
        $("#c_fancy").css({'display' : 'block'});
        $("#my_account").slideDown("Slow");
    });

    function hideAccount() { 
        $("#c_fancy").css({'display' : 'none'});
        $("#my_account").slideUp("Slow");
    }

    $("#hide_account").click(hideAccount);
    $(document).click(hideAccount);

    $("#c_fancy").click(function(e) {
        e.stopPropagation();
    });
});

我确实注意到 div 后面的内容变暗了。如果此变暗叠加层是 #c_fancy 元素的一部分，则可能会导致问题。如果是这样，您需要稍微更改一下代码。基本上，您需要将上面的代码从 $(document) 更改为 $('#myOverlay')，适本地替换 #myOverlay当然。