在容器外部单击时容器自动隐藏

Question

我正在尝试为视频播放器创建自己的自定义UI。 它将包括一个选项切换按钮，它将打开一个选项容器。 当用户单击容器中的任何内容时，选项容器不应关闭，并且选项切换应正确切换。 当用户单击屏幕上的其他位置时，如何隐藏选项容器？ 谢谢

我还将在单个文档中插入许多视频播放器。

 var oc = document.querySelector(".options_container"), ot = document.querySelector(".options_toggle"); oc.style.visibility = "hidden"; ot.onclick = function() { if (oc.style.visibility == "hidden") oc.style.visibility = "visible"; else oc.style.visibility = "hidden"; };

 body { margin: 0; padding: 0; } .container { width: 95%; height: 250px; border: 1px solid black; display: block; margin: 15px; position: relative; } .container .options_container { width: 200px; height: 150px; background-color: skyblue; position: absolute; bottom: 50px; right: 5px; } .container .bar { width: 100%; height: 45px; background-color: skyblue; position: absolute; bottom: 0; left: 0; } .container .bar img { width: 30px; height: 30px; float: right; margin: 7.5px 20px; }

 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div class="container"> <div class="options_container"></div> <div class="bar"> <img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png"> </div> </div> </body> </html>

Answer 1

您可以这样尝试：

  $(document).ready(function(){ $('.options_toggle').click(function(event){ event.stopPropagation(); $(".options_container").slideToggle("fast"); }); $(".options_container").on("click", function (event) { event.stopPropagation(); }); }); $(document).on("click", function () { $(".options_container").hide(); });

 body { margin: 0; padding: 0; } .container { width: 95%; height: 250px; border: 1px solid black; display: block; margin: 15px; position: relative; } .container .options_container { width: 200px; height: 150px; background-color: skyblue; position: absolute; bottom: 50px; right: 5px; display:none; } .container .bar { width: 100%; height: 45px; background-color: skyblue; position: absolute; bottom: 0; left: 0; } .container .bar img { width: 30px; height: 30px; float: right; margin: 7.5px 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div class="container"> <div class="options_container"></div> <div class="bar"> <img class="options_toggle" src="https://www.logolynx.com/images/logolynx/61/61f0d7caaee233b43ea8c5359c038c41.png"> </div> </div> </body> </html>

Answer 2

您可以注册一个函数来监听单击事件。 如果用户单击屏幕上不是容器的任何位置，则它将关闭所有容器。 您可以进一步修改功能以实施更复杂的验证。

function closeContainers() {
  // Get all the containers
  let containers = document.getElementsByClassName("container");

  // If the user hasn't clicked on the current container then remove the visibility

  containers.forEach(function (container) {
   if (container.classList.contains('visible')) {
      container.classList.remove('visible');
   }
  })
}

// Close the container if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.container')) {
    closeContainers();
  }
}

在容器外部单击时容器自动隐藏

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-07-20 05:38:00

解决方案2
1 2019-07-20 06:05:55

在容器外部单击时容器自动隐藏

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-07-20 05:38:00

解决方案2 1 2019-07-20 06:05:55

解决方案1
2 已采纳 2019-07-20 05:38:00

解决方案2
1 2019-07-20 06:05:55