Question

我无法弄清楚如何在点击它之外关闭此下拉列表div。我发现在点击外部时关闭的版本以及点击下拉列表但由于我的下拉列表有多个复选框，我想继续允许点击下拉菜单而不关闭下拉菜单：

"permissions": [ "tabs", "<all_urls>" ]

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropbtn:hover {
  background-color: #3e8e41;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}
label {
  display: block;
  padding: 12px 16px;
}
.show {
display:block; 
}

Answer 1

您可以听取文档上的点击，只需隐藏下拉列表。缺点是点击按钮切换它然后点击传播并隐藏你的下拉列表。你可以通过防止传播来解决这个问题您还需要单击复选框来执行此操作。

ENV_ROLE

function myFunction() {
  event.stopPropagation();
  document.getElementById("myDropdown").classList.toggle("show");
}

document.onclick = function() {
  document.getElementById("myDropdown").classList.remove("show");
}
document.getElementById("myDropdown").onclick = function() {
  event.stopPropagation();
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

label {
  display: block;
  padding: 12px 16px;
}

.show {
  display: block;
}

Answer 2

快速解决方案将为您提供方向：

Params

Answer 3

这是一个可读的解决方案，我将解释发生了什么。

我们希望能够点击任何地方，但下拉菜单要关闭，所以我们在主体上添加一个点击处理程序来切换正文上的按钮。

关闭后我们删除了监听器。

单击下拉列表时，

event.stopPropagation();会阻止正文单击关闭下拉列表

const dd = document.getElementById("myDropdown");
document.addEventListener('click', () => toggle("remove"));
dd.onclick = event => event.stopPropagation();

function toggle(key = "toggle") {
  event.stopPropagation();
  dd.classList[key]("show");
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

body {
  height: 100vh
}

label {
  display: block;
  padding: 12px 16px;
}

.show {
  display: block;
}

<div class="dropdown">
  <button onclick="toggle()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <label><input type="checkbox" value="Vanilla">Vanilla</label>
    <label><input type="checkbox" value="Chocolate">Chocolate</label>
    <label><input type="checkbox" value="Strawberry">Strawberry</label>
  </div>
</div>

点击外面隐藏下拉列表div

3 个答案: