Question

我搜索并搜索谷歌，但也在这里，仍然需要找到一个可行的解决方案。

我有一个默认隐藏的div，然后点击链接切换。当你点击div外面时我也希望它隐藏起来。很简单，我想，但我尝试过的任何东西都没用过。

这是jquery：

<script type="text/javascript">
    function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200);
    }
</script>

切换它的链接：

<a onclick="toggleDiv('myDiv');">Link</a>

然后是div：

<div id="myDiv">
stuff
</div>

如果有人有任何建议，我会非常感激。

Answer 1

这应该适合你：

var openDiv;

function toggleDiv(divID) {
    $("#" + divID).fadeToggle(200, function() {
        openDiv = $(this).is(':visible') ? divID : null;
    });
}

$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});

Example →

编辑：现在适用于所有情况。

Answer 2

您可以在body上添加点击处理程序，只需点击一下即可“冒泡”到此元素。

$("body").click(function(){ $("#myDiv").fadeOut(200); });

您可能还想在演示代码中添加一个关于切换元素的类，以便在您想要隐藏它们时更具体地定位它们。

function toggleDiv(divID) {
    $("#"+divID).fadeToggle(200).toggleClass("visible");
}

$("body").click(function(){
    $(".visible").fadeOut(200, function(){
        $(this).removeClass("visible");
    });
});

如果您不希望在点击本身时隐藏可见的div，您还需要取消对这些元素的点击，可能使用jQuery的live()方法。

$(".visible").live("click", function(e){ e.stopPropagation(); });

Answer 3

$(document).mouseup(function(e) {
                var container = $("#form1");

                if (container.has(e.target).length === 0) {
                    container.hide();
                    $('#signupSection').css('display', 'none');
                    $('#signupSection2').css('display', 'block');
                }
            });

点击外面时隐藏div

3 个答案: