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

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

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 个答案: