jQuery：单击元素之外的任何其他位置时隐藏元素[重复]

Question

我正在尝试实现 div 隐藏如果用户单击除元素之外的任何位置。如果用户单击按钮，我将执行toggle() 的以下代码。如果Details 元素可见，我希望按钮单击保持加号，并对屏幕的其他部分做出反应。

$('.nav-toggle').click(function() {
  //get collapse content selector
  var collapse_content_selector = $(this).attr('href');

  //make the collapse content to be shown or hide
  var toggle_switch = $(this);
  $(collapse_content_selector).toggle(function() {
    if ($(this).css('display') == 'none') {
      //change the button label to be 'Show'
      toggle_switch.html('Show Details');
    } else {
      //change the button label to be 'Hide'
      toggle_switch.html('Hide Details');
    }
  });
});

Answer 1

您可以使用jQuery .blur() 函数在用户单击其他元素（如链接、按钮等）时隐藏 div

当一个元素失去焦点时触发 blur 事件（用户在 DOM 树上选择另一个元素）

我不明白你的切换链接。如果您的切换按钮管理 DIV，则它在切换功能中，您应该将 hide()/show() 放在 div 上，同时更新按钮的文本。

Answer 2

你可以诉诸event delegation的概念。

$(function() {
    $(document).on('click', function(e) {
        if (e.target.id === 'div1') {
            alert('Div Clicked !!');
        } else {
            $('#div1').hide();
        }

    })
});​

查看FIDDLE

没看懂你说的和其他部分整合是什么意思。。基本思路是这样的。。