Question

可能重复：
How to detect a click outside an element?

如果用户点击除元素之外的任何地方，我正试图实现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

您可以使用event delegation的概念。

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

    })
});

检查FIDDLE

我不明白你与其他部分整合的意思。这是基本的想法......

Answer 2

当用户点击其他元素（如link，boutton，whathever ..）时，您可以使用jQuery .blur()函数隐藏div。

当一个元素失去焦点时（用户选择DOM树上的另一个元素），模糊事件就会触发

我不明白你的切换链接。如果你的切换按钮管理DIV，它在切换功能里面你应该在div上放置hide（）/ show（），同时更新按钮文本。

jQuery：在元素的任何其他位置单击时隐藏元素

2 个答案: