>我正在使用此脚本打开一个下拉菜单,然后在单击除触发器以外的任何其他内容时将其关闭。现在我正在尝试将第二个下拉列表添加到页面上的另一个区域并重复脚本,但它正在中断。
例如,我单击按钮A(Gravatar(,然后下拉A打开。
但是,当我添加第二个脚本并单击按钮 B(类别(以打开下拉 B 时,向下 A 保持打开状态。
此外,添加第二个脚本会破坏第一个脚本的下拉关闭功能。
这是脚本:
<script>
function openAccount(event) {
event.stopPropagation();
document.getElementById("gravatar").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<script>
function openCategory(event) {
event.stopPropagation();
document.getElementById("category").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<li class="gravatar">
<a href="#" class="dropbtn" onclick="openAccount(event)">
<img src="<?php echo $gravatar; ?>" alt="" />
<span class="fa fa-icon fa-caret-down"></span>
</a>
<ul class="dropdown" id="gravatar">
<li class="header">
<?php echo $user['email']; ?>
</li>
</ul>
</li>
<div class="category">
<a href="#" class="dropbtn" onclick="openCategory(event)">Properties<span class="fa fa-icon fa-caret-down"></span></a>
<div id="category">Test</div>
</div>
目标:
- 页面不同部分的多个下拉菜单。
- 单击打开下拉列表。
- 单击页面上的任何其他位置可关闭下拉列表。
- 单击时还会关闭任何以前打开的菜单。
我会做一些非常简单的事情,比如在单击的元素上放置一个 data* 属性,该元素包含要显示或隐藏的元素的 ID,例如
// Toggle hidden class on/off
function toggleVis(event) {
// Stop click on element bubbling (to body)
event.stopPropagation();
// Get target element
var el = document.getElementById(this.dataset.id);
// If non-target elements are visible, hide them
hideAll(el);
// Toggle target
el.classList.toggle('hidden');
}
// Hide all, excluding passed element
function hideAll(el) {
Array.from(document.querySelectorAll('ul:not(.hidden)')).forEach(function(node){
if (el != node) node.classList.add('hidden');
});
}
// Attach listeners
window.onload = function() {
// Add to linkLike spans
Array.from(document.querySelectorAll('.linkLike')).forEach(function(node) {
node.addEventListener('click', toggleVis, false);
});
// Add hideAll listener to wndow
window.addEventListener('click', hideAll, false);
// Run hideAll
hideAll();
}
/* style span like link */
.linkLike {
text-decoration: underline;
cursor: pointer;
}
/* class to hide element */
.hidden {
visibility: hidden;
}
<ul id="a"><li>A</ul>
<ul id="b"><li>B</ul>
<ul id="c"><li>C</ul>
<ul id="d"><li>D</ul>
<div><span class="linkLike" data-id="a">Toggle A</span></div>
<div><span class="linkLike" data-id="b">Toggle B</span></div>
<div><span class="linkLike" data-id="c">Toggle C</span></div>
<div><span class="linkLike" data-id="d">Toggle D</span></div>
当然还有其他方法可以进行关联,但 ID 简单、明确,不依赖于文档布局或格式。