0

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

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

2 回答 2

1

如果在外部单击，这个问题确实是隐藏 div 的副本

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

解决方案：

jsFiddle

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

进一步阅读

于 2013-06-27T17:25:39.003 回答
1

一种可能的解决方案是 Ankit 推荐的解决方案（他似乎已经删除了他的帖子）。这是它的一个 jsfiddle 示例：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");
});

这个怎么运作：

  1. 聚焦#share元素，使其模糊（未聚焦）。
  2. 当#share元素模糊时，删除open该类。

如果您想保持“for”属性的功能，请使用 on 函数的 data 参数。

有一种替代方法可以避免应用焦点装饰器的问题#share：向父元素（似乎覆盖整个屏幕）注册一个点击侦听器，该元素阻止其激活，#share如下所示：

$('#moresh').on('click', function(event) {
    var elt = $(this).attr('for');
    $("#" + elt).toggleClass("open");

    function onBodyClick(event) {
        $(this).off('click', '', onBodyClick);
        $(this).removeClass('open');
    }

    $("#" + elt).on('click', onBodyClick);
});
$(function() {
    $("#share").draggable();
});
$("#share").on('click', function(event) {
    event.stopPropagation();
});

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

于 2013-06-27T17:27:48.917 回答