javascript jQuery：通过单击除 DIV 本身之外的任何位置来关闭 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6610022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: Close DIV by clicking anywhere apart from the DIV itself?
提问by CodeyMonkey
I have a div that slides down when a button is clicked, and I would like to slide up the div when a user:
我有一个在单击按钮时向下滑动的 div，当用户出现时，我想向上滑动 div：
- Clicks anwhere except within the DIV itself
- Click a close button within the div.
- 在 DIV 本身之外的任何地方单击
- 单击 div 中的关闭按钮。
Currently I've got it to a stage where, you click an element with the class .panel-tab- it slides down the panel with ID #panel... click anywhere else it slides up....
目前我已经到了一个阶段，你点击一个带有类的元素.panel-tab- 它沿着带有 ID 的面板向下滑动#panel......点击它向上滑动的任何其他地方......
Here is my code so far to get the DIV to open and close:
到目前为止，这是我用来打开和关闭 DIV 的代码：
<script type="text/javascript">
$(document).ready(function(){
$('.panel-tab').click(function(e) {
$("#panel").stop(true, true).slideToggle("slow");
e.stopPropagation();
});
$("body").click(function () {
$("#panel:visible").stop(true, true).slideUp("slow");
});});
</script>
回答by jAndy
You could bind a clickevent to the documentand check if the click event happend within that divor any children. If not, close it.
您可以将click事件绑定到document并检查点击事件是否发生在该事件div或任何子级中。如果没有，请关闭它。
Plugin time!
插件时间！
(function($){
$.fn.outside = function(ename, cb){
return this.each(function(){
var $this = $(this),
self = this;
$(document).bind(ename, function tempo(e){
if(e.target !== self && !$.contains(self, e.target)){
cb.apply(self, [e]);
if(!self.parentNode) $(document.body).unbind(ename, tempo);
}
});
});
};
}(jQuery));
usage:
用法：
$('.panel-tab').outside('click', function() {
$('#panel').stop(true, true).slideUp('slow');
});
回答by Roko C. Buljan
EDITHow to create a custom modal popup - and how to close it clicking outside of it
编辑如何创建自定义模式弹出窗口 - 以及如何关闭它点击它的外部
Here, just an example of mine: http://jsbin.com/uqiver/1/edit
在这里，只是我的一个例子：http: //jsbin.com/uqiver/1/edit
$("body").on('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'panel') {
$('#panel').hide();
}
});
Oryou can also check if it's visible at first:
var $pan = $('#panel');
$("body").on('click', function(ev) {
if ($pan.is(':visible') && ev.target.id !== 'panel') $pan.hide();
});
$("body").on('click', function(ev) {
var myID = ev.target.id;
if (myID !== 'panel') {
$('#panel').hide();
}
});
或者您也可以首先检查它是否可见：
var $pan = $('#panel');
$("body").on('click', function(ev) {
if ($pan.is(':visible') && ev.target.id !== 'panel') $pan.hide();
});
回答by meo
i would do something like this
我会做这样的事情
var $doc, $panel = $('.panel-tab');
$doc = $(document);
$doc.bind("click", function(){
$panel.hide();
$doc.undbind("click");
});
$panel.bind("click", function(e){
e.stopPropagation();
});
you always close the tab on the click on the document, but you stop the event from propagation on the tab it self.
您总是在单击文档时关闭选项卡，但您会阻止事件本身在选项卡上传播。
here a working example: http://jsfiddle.net/meo/TnG4E/
这里有一个工作示例：http: //jsfiddle.net/meo/TnG4E/
