2

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

截图： 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>
4

1 回答 1

1

首先，焦点/模糊通常仅适用于input元素。他们不会为div元素开火。

您需要在div单击文档时将其隐藏，但在单击文档div本身或其中的任何内容时则不需要。为此，请向文档添加一个点击处理程序，然后停止对divDOM 树的点击，如下所示：

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

于 2012-04-11T18:26:50.727 回答