jQuery：在除该元素以外的任何地方单击时隐藏元素

26 浏览
0 Comments

jQuery：在除该元素以外的任何地方单击时隐藏元素

这个问题在这里已经有答案了：

如何检测元素外部的点击事件？

我想要实现一个功能，当用户在除该元素以外的任何地方点击时，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');
    }
  });
});

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

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

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

我不明白您的切换按钮与DIV之间的联系。如果您的切换按钮管理DIV，那么您应该在切换函数内放置hide()/show()函数，并在更新按钮文本的同时执行此操作。

0
0 Comments

您可以采用事件委托的概念.

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

查看FIDDLE

我不明白您所说的与其他部分集成的含义.. 这是基本思路..

0