通过单击外部关闭下拉列表

Question

我希望不仅可以通过单击x，还可以通过单击它的外部来关闭下拉菜单。我的js代码似乎不起作用。Javascript是从我留在某个地方的模板中复制的，但实际上我无法修复它以使其工作。

window.onclick = function closeMenu() {
if(document.getElementById("dropdown-content").style.left != "-300px") {
var dropdown = document.getElementById("dropdown-content");
var i;
for(i = 0; i < dropdown.length; i++) {
var openDropdown = dropdown[i];
if(openDropdown.style.left != ('-300px')) {
openDropdown.style.left = ('-300px');
}
}
}
}

.dropdown-content {
position: fixed;
background-color: rgb(255, 255, 255);
width: 300px;
height: 100%;
/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
z-index: 600;
transition: 0.3s;
}
#dropdown-content {
left: -300px;
z-index: 600;
}

<div class="dropdown-container">
<div class="dropdown-content" id="dropdown-content">
<div class="menubutton" onclick="menu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="menulist">
<a href="#">Angebot des Tages</a>
<a href="#">Alle Angebote</a>
<a href="#">Technik</a>
<a href="#">Hardware</a>
<a href="#">Mode</a>
<a href="#">Automobil</a>
</div>
</div>
</div>

Answer 1

const x = document.querySelector('.x');
const ul = document.querySelector('ul');
x.addEventListener('click', () => {
ul.classList.toggle('show');
});
document.addEventListener('click', ({
target
}) => {
if (target.matches('.x') === false) {
ul.classList.remove('show');
}
});

ul {
display: none;
}
ul.show {
display: block;
}

<div class="x">X</div>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

在这里，我们跟踪X，只使用toggle()，对于任何其他点击，我们确保它不是X，然后只是remove()我们的显示类。

Answer 2

如果您只使用普通javascript，您可以向侦听click事件的document对象添加一个eventListener，并检查下拉列表的某些条件以检查它是否已打开，如果已打开，则关闭它，如果未打开，则不执行任何操作。

类似于：

document.addEventListener('click', () => {
const dropdown = ... // grab dropdown element
if (isOpened(dropdown)) closeDropdown()
})

编辑：你还应该检查点击是否发生在你的下拉列表之外，因为如果点击也会被触发。为此，您可以使用节点API。

保留为：

document.addEventListener('click', (e) => {
const dropdown = ... // grab dropdown element
if (dropdown.contains(e.target)) return; // if the clicked element is inside the dropdown or it's the dropdown itself, do nothing
if (isOpened(dropdown)) closeDropdown()
})