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本身或其中的任何内容时。为此，请在文档中添加一个单击处理程序，然后停止点击div以向上传播DOM树，如下所示：

$(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();
    });
});

然后，您可能希望合并隐藏代码并将其置于常用功能中：

$(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。

焦点丢失时隐藏分割

1 个答案: