如何通过单击外部来隐藏或关闭 div 框？答案

【问题标题】：How do I hide or close the div box by click outside?如何通过单击外部来隐藏或关闭 div 框？
【发布时间】：2012-10-17 09:02:12
【问题描述】：

这很好用。但是现在我想添加该功能，以便如果用户单击 div 之外的任何位置，则 div 将返回隐藏状态。还有一个问题，我也可以使用相同的代码IPade...

http://jsfiddle.net/HNrCD/2/

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

<script type='text/javascript'>//<![CDATA[
    $(document).ready(function () {
        $("#focus").click(function () {
            $('#hidden-item').toggleClass('focused');

        });

    });//]]>  

</script>
<style type="text/css">
#focus {float: left; background: #333; color: #fff; padding: 5px;}
#wrap {
    width: 100%;    
    position: fixed;
}

#hidden-item {
  background: red; color: #fff;
  position: absolute;
  top: 50px;
  left: 100%;
  width: 100%;
  margin-left:15px;


  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}


#hidden-item.focused {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div id="wrap">
    <p id="focus">Click to Show/Hide</p>

    <div id="hidden-item">
        Hidden div...
        <br />
        <br /><br /><br /><br /><br />
        Line2
    </div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery html hide

【解决方案1】：

试试这个选择器$(":not('#wrap')")

$(":not('#wrap')").click(function(){
   // hide your div here
});

【讨论】：

【解决方案2】：

这是 JS：

http://jsfiddle.net/CCmy2/

这是基于 YogeshWaran 的回答！扶他起来。

【讨论】：

感谢您的帮助..这就是我所需要的..）工作完美...）
但是，如果您单击 div 之外，它会在您的示例中再次切换，而不仅仅是隐藏。如果它更符合您的初始要求，请在下面查看我的答案。

【解决方案3】：

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

Close a customized box at ESC keypress with JQuery

我发布了来自 Joffrey 的类似答案（稍作修改）。相反，#modal-dialog 可以是您想要关闭它的任何 div 选择器。而不是在新版本的 jquery 中不推荐使用的live，而是使用on。

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


}

【讨论】：

【解决方案4】：

您必须在切换类中将 left:0 更改为 left:0px。

使用您的代码获得结果：http://jsfiddle.net/G5Yh4/1

对于您的问题，将 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 有一个用于“不悬停”的选择器，例如.not(':hover')。你可以在那里查看：http://api.jquery.com/not/

【讨论】：

谢谢...但是我需要通过单击隐藏项 div 之外的任何位置来关闭“隐藏项”div...