jquery - 需要用jquery点击功能修改

Question

这是我正在尝试做的事情。我创建了一个 jsfiddle，因此您可以查看并让我知道如何做我正在寻找的东西。

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

http://jsfiddle.net/s2FzE/

就代码而言，它工作正常。单击按钮会触发一个框出现和消失。工作正常。

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

1. 再次单击按钮或
2. 单击框以外的任何位置（单击页面正文）<-这是我需要帮助的地方。

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);

演示

Answer 2

Listen for a click on the document level, and filter out any clicks on the button or box :

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