Jquery 如何通过单击“外部”隐藏或关闭div框？

这个很好用。但是现在我想添加这个功能，这样如果用户单击div之外的任何地方，div将返回隐藏状态。还有一个问题，我可以使用同样的代码IPade吗

如何通过单击“外部”隐藏或关闭div框？

//
#焦点{浮动：左；背景：#333；颜色：#fff；填充：5px；}
#包裹{
宽度：100%；
位置：固定；
}
#隐藏项{
背景：红色；颜色：#fff；
位置：绝对位置；
顶部：50px；
左：100%；
宽度：100%；
左边距：15px；
-webkit过渡：所有0.5s易用性；
-moz过渡：所有0.5s的易用性；
-ms过渡：所有0.5秒的轻松过渡；
-o型过渡：所有0.5s易于进入；
过渡：所有0.5s的轻松过渡；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
}
#隐藏项{
左：0；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
}
单击以显示/隐藏
隐藏分区。。。










第2行

查看我的问题和标记的答案：

我从Joffrey那里发布了类似的答案（稍加修改）。相反，

#模态对话框

可以是要关闭它的div的任何选择器。而不是新版本jquery中不推荐使用的

live

，而是在上使用

$("html").on("keyup", function(e) {

if(e.keyCode === 27 && !($('#modal-dialog').hasClass("no-display")))

    escape_check();

}

}

function escape_check() {

// here, reset any fields at closing box (if you have any) 

$("#modal-dialog").removeClass("no-display");

$("#feedback-modal-dialog input").each(function() {
    $('#modal-dialog').attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
    $('#modal-dialog').val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()


}

请参见我的问题和标记的答案：


我从Joffrey那里发布了类似的答案（稍加修改）。相反，
#模态对话框
可以是要关闭它的div的任何选择器。而不是新版本jquery中不推荐使用的
live
，而是在

上使用

$("html").on("keyup", function(e) {

if(e.keyCode === 27 && !($('#modal-dialog').hasClass("no-display")))

    escape_check();

}

}

function escape_check() {

// here, reset any fields at closing box (if you have any) 

$("#modal-dialog").removeClass("no-display");

$("#feedback-modal-dialog input").each(function() {
    $('#modal-dialog').attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
    $('#modal-dialog').val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()


}

您必须在toggle类中将
left:0
更改为
left:0px

结果使用您的代码：

对于您的问题，请将JS更改为：

var hover_focus = false ;
$(document).ready(function () {
    $("#focus").click(function () {
        $('#hidden-item').toggleClass('focused');
    })
    .mouseover(function () {
        hover_focus = true ;
    })
    .mouseout(function () {
        hover_focus = false ;
    });
});

$(document).click(function() {
    if(!hover_focus) {
          $('#hidden-item').removeClass('focused');             
    }
}) ;

​
我认为jQuery有一个“nothover”选择器，类似于
.not（':hover'）
。您可以在那里进行检查：
您必须在切换类中将
左：0
更改为
左：0px

结果使用您的代码：

对于您的问题，请将JS更改为：

var hover_focus = false ;
$(document).ready(function () {
    $("#focus").click(function () {
        $('#hidden-item').toggleClass('focused');
    })
    .mouseover(function () {
        hover_focus = true ;
    })
    .mouseout(function () {
        hover_focus = false ;
    });
});

$(document).click(function() {
    if(!hover_focus) {
          $('#hidden-item').removeClass('focused');             
    }
}) ;

​
我认为jQuery有一个“nothover”选择器，类似于
.not（':hover'）
。您可以在那里进行检查：
尝试此选择器$（“：not（“#wrap”）”）

请尝试此选择器（“：not（“#wrap”）”

以下是JS：


这是基于约格什瓦兰的答案！抓住他。
这是JS：


这是基于约格什瓦兰的答案！把他举起来。
谢谢。。。但我需要关闭“隐藏项”分区，点击隐藏项分区外的任何地方…谢谢。。。但我需要通过单击隐藏项分区外的任何位置来关闭“隐藏项”分区…感谢您的帮助。。这就是我需要的…）工作完美…）但是如果你点击了div，它会在你的例子中再次切换，而不仅仅是隐藏。如果我的答案更符合您的初始要求，请查看下面的答案。谢谢您的帮助。。这就是我需要的…）工作完美…）但是如果你点击了div，它会在你的例子中再次切换，而不仅仅是隐藏。如果我的答案更符合您的初始要求，请查看下面的答案。