Javascript——如何点击页面上的任意位置来隐藏打开的div

手写笔

我有一个 javascript 可以打开一个隐藏的 div:

<script>
function dropdown() 
{ document.getElementById("login_dropdown").style.display="block"; }
</script>

html是:

<div onclick="dropdown()">
<div id="login_dropdown">STUFF</div>
</div>

CSS是:

<style>
#login_dropdown {
width: 150px;
display:none;
}</style>

单独使用 javascript,当我点击页面上的任何其他地方时,我如何隐藏这个 div,不包括打开的 DIV 本身。

拉斐尔·昆特拉

function closest(e, t){ 
  return !e? false : e === t ? true : closest(e.parentNode, t);
}

container = document.getElementById("popup");
open = document.getElementById("open");

open.addEventListener("click", function(e) {
  container.style.display = "block";
  open.disabled = true;
  e.stopPropagation();
});

document.body.addEventListener("click", function(e) {
    if (!closest(e.target, container)) {
        container.style.display = "none";
        open.disabled = false;
    }
});
#popup {
  border: 1px solid #ccc;
  padding: 5px;
  display: none;
  width: 200px;
}
<div id="container">
  <button id="open">open</button>
  <div id="popup">PopUp</div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何通过单击页面上的任意位置来关闭下拉菜单?

来自分类Dev

当单击页面上的任意位置时,下拉菜单隐藏

来自分类Dev

选择框选项制成后,如何停止JS查询来隐藏页面上的所有div?

来自分类Dev

将div放置在页面上的任意位置,但仍将文本环绕

来自分类Dev

涉及CSS缩放时如何获取页面上的点击位置

来自分类Dev

如何从jQuery页面上的点击事件检查父div

来自分类Dev

页面上的Javascript点击模拟

来自分类Dev

如何使用JavaScript从页面上删除div

来自分类Dev

如何通过点击动画CSS来隐藏div

来自分类Dev

使用Puppeteer单击页面上的任意位置

来自分类Dev

如何显示和隐藏页面上的某些div?

来自分类Dev

如何仅在特定页面上隐藏div?文字新闻

来自分类Dev

如何使用javascript / jquery调用jsf页面上的隐藏按钮

来自分类Dev

单击页面上的任意位置时切换div内容

来自分类Dev

div离开屏幕后,将其隐藏并保持用户在页面上的相同位置

来自分类Dev

使用jQuery在某些页面上隐藏div

来自分类Dev

使用jQuery在某些页面上隐藏div

来自分类Dev

PHP:在特定页面上显示/隐藏 Div

来自分类Dev

如何直接打开html页面到div id位置?

来自分类Dev

单击页面上任何位置时如何隐藏下拉菜单

来自分类Dev

CSS div更改特定页面上的位置

来自分类Dev

单击页面上的任意位置时禁用覆盖

来自分类Dev

用户单击页面上的任意位置时,删除班级

来自分类Dev

单击页面上的任意位置时,jQuery会向后滑动

来自分类Dev

单击页面上的任意位置,弹出窗口应消失

来自分类Dev

如何编辑URL,以便将您强制到打开的页面上的特定位置?

来自分类Dev

在点击时显示/隐藏div-如何使div 1在页面加载时显示?

来自分类Dev

在点击时显示/隐藏div-如何使div 1在页面加载时显示?

来自分类Dev

点击隐藏 div(即使页面刷新也保持隐藏)

Related 相关文章

  1. 1

    如何通过单击页面上的任意位置来关闭下拉菜单?

  2. 2

    当单击页面上的任意位置时,下拉菜单隐藏

  3. 3

    选择框选项制成后,如何停止JS查询来隐藏页面上的所有div?

  4. 4

    将div放置在页面上的任意位置,但仍将文本环绕

  5. 5

    涉及CSS缩放时如何获取页面上的点击位置

  6. 6

    如何从jQuery页面上的点击事件检查父div

  7. 7

    页面上的Javascript点击模拟

  8. 8

    如何使用JavaScript从页面上删除div

  9. 9

    如何通过点击动画CSS来隐藏div

  10. 10

    使用Puppeteer单击页面上的任意位置

  11. 11

    如何显示和隐藏页面上的某些div?

  12. 12

    如何仅在特定页面上隐藏div?文字新闻

  13. 13

    如何使用javascript / jquery调用jsf页面上的隐藏按钮

  14. 14

    单击页面上的任意位置时切换div内容

  15. 15

    div离开屏幕后,将其隐藏并保持用户在页面上的相同位置

  16. 16

    使用jQuery在某些页面上隐藏div

  17. 17

    使用jQuery在某些页面上隐藏div

  18. 18

    PHP:在特定页面上显示/隐藏 Div

  19. 19

    如何直接打开html页面到div id位置?

  20. 20

    单击页面上任何位置时如何隐藏下拉菜单

  21. 21

    CSS div更改特定页面上的位置

  22. 22

    单击页面上的任意位置时禁用覆盖

  23. 23

    用户单击页面上的任意位置时,删除班级

  24. 24

    单击页面上的任意位置时,jQuery会向后滑动

  25. 25

    单击页面上的任意位置,弹出窗口应消失

  26. 26

    如何编辑URL,以便将您强制到打开的页面上的特定位置?

  27. 27

    在点击时显示/隐藏div-如何使div 1在页面加载时显示?

  28. 28

    在点击时显示/隐藏div-如何使div 1在页面加载时显示?

  29. 29

    点击隐藏 div(即使页面刷新也保持隐藏)

热门标签

归档