Question

我在各种解决方案中搜索但似乎没有工作。为此，我回到这里寻找一个解决方案。我创建了这种窗口来共享和自定义我的网站的东西。问题是当我想要关闭时我想点击div（黑区）。对不起英语，但我是意大利人。

`http://jsfiddle.net/34uLs/`

Answer 1

这个问题确实是hide div if clicked outside of it

的重复

但是在这种情况下，由于深色背景#shead是最顶层的元素，因此应将click事件附加到它。如果点击事件附加到$(document)对象，则它永远不会到达，因为#shead会捕获它。

<强>解决方案：

jsFiddle

/** The event should be binded with this element **/
$('#shead').click(function () {
    $(this).toggleClass("open");
});

进一步阅读

Answer 2

一个可能的解决方案是Ankit推荐的（他似乎已经删除了他的帖子）。以下是它的一个实例：http://jsfiddle.net/drb9w/11/。但是，这确实存在应用于#share元素的焦点对象的浏览器样式的弱点。

$('#moresh').click(function (event) {
    var elt = $(this).attr('for');
    $("#" + elt).toggleClass("open");
    $("#share").focus();
});
$(function () {
    $("#share").draggable();
});
$("#share").on('blur', function(event) {
    $('#shead').removeClass("open");
});

工作原理：

聚焦#share元素，使其模糊（不聚焦）。
当#share元素模糊时，请移除open类。

如果要维护'for'属性的功能，请使用on函数的data参数。

有一种替代方法可以避免焦点修饰符应用于#share的问题：将一个点击侦听器注册到父元素（似乎覆盖整个屏幕），这会阻止{像这样的{1}}元素：

#share

http://jsfiddle.net/trG2n/6/

如果我点击外面如何关闭div。用jsFiddle例子

2 个答案: