单击外部时隐藏 div答案

【问题标题】：Hide div when clicking outside单击外部时隐藏 div
【发布时间】：2011-09-20 19:51:45
【问题描述】：

我不仅搜索了谷歌，还搜索了这里，但仍然必须找到可行的解决方案。

我有一个默认隐藏的 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>

如果有人有任何建议，我将不胜感激。

【问题讨论】：

由于您使用的是 jQuery，您还需要使用 jQuery 工具附加单击事件处理程序： $(document).ready(function() { $("#linkId").click( function() { // 做事 }));

标签： jquery hide

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这应该对你有用：

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 →

编辑：现在适用于所有场景。

【讨论】：

实际上，当尝试对多个不同的 div 进行相同的行为时，这似乎有点问题。

【解决方案3】：

您可以在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(); });

【讨论】：

您必须设置一个标志，表明点击是否发生在 div 上。在里面，不要褪色。外面，褪色。