[html css jQuery]如何通过单击外面隐藏元素-DEV365 开发者社区

有一个我们需要通过单击其外部关闭的元素。我们可以使用简单可重复使用的函数来做到这一点。

codepen demo ：https://codepen.io/ktr92/pen/LYgyGaY

解决方案示例

html

<div>
  <button data-toggleclick="block1">Open block 1</button>
  <div data-toggleblock="block1" class="active">
     Click outside to close
  </div>
  <div>
    <br><br>
  <button data-toggleclick="block2" >Open block 2</button>
    <div data-toggleblock="block2"  class="active">
      Click outside to close
    </div>
  </div>
</div>

CSS

[data-toggleblock] {
  display: none;
}

[data-toggleblock].active {
  display: block;
}

JS（jQuery）
我们需要第二个参数（元素的打开按钮），以防止元素同时打开和关闭。

function closeByClickOutside(element, button, callback) {
    $(document).click(function(event) {
        if (!$(event.target).closest(`${element},${button}`).length) {
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });

    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
            $(button).removeClass('active')
            $(element).removeClass('active')
            // or  
            //$(element).hide()
        }
    });

    if (callback instanceof Function) { callback(); }
  }

// usage
closeByClickOutside('[block_selector]', '[button_selector]')