Question

这是我想要做的事情。我已经创建了一个jsfiddle，所以你可以看看，让我知道如何做我想要的。

$(document).ready(function() {
  $('#trigger-button').click( function () {
      $('#trigger-box').toggle();
  });
});

http://jsfiddle.net/s2FzE/

就代码而言，它工作得很好。单击按钮会触发一个框以显示和消失。工作正常。

但我想要的是如果有人点击按钮并出现方框，则该方框可以通过2种方法消失。

再次点击按钮或
点击框以外的任何地方（点击页面正文）＆lt; - 这是我需要帮助的地方。

Answer 1

这是我的方法：

当用户点击任意位置时，您需要一个document事件监听器来隐藏该框。但是当隐藏框时不需要事件监听器，因此 - 只有在显示框时才会添加它，例如：

var box = $('#trigger-box'),
    showBox = function  (e) {
        if (!box.is(':visible')) {                      // only do that when box is hidden
            e.stopPropagation();                        // required to prevent document 
            box.show();
            $(document).on('click.showBox', hideBox);   // event namescope for easy removal
        }
    },

然后 - 当盒子隐藏时 - 我们可以删除这个事件监听器，如下所示：

var hideBox = function (e) {
    var target = $(e.target);
    if (target.is(box) || target.closest(box).length) return;  // don't close if clicked on box or on anything inside the box
    $(document).off('click.showBox');
    box.hide();
}

然后 - 我们可以添加事件监听器：

 $('#trigger-button').on('click', showBox);

DEMO

Answer 2

听取文档级别的点击，并过滤掉按钮或框上的任何点击：

$(document).ready(function () {
    $('#trigger-button').click(function () {
        $('#trigger-box').toggle();
    });
    $(document).on('click', function(e) {
        if ( !$(e.target).closest('#trigger-box, #trigger-button').length ) 
             $('#trigger-box').hide();
    });
});

FIDDLE

需要使用jquery点击功能进行修改

2 个答案: