我正在尝试使用下面的代码创建两个下拉菜单
myFunction()的第一个按钮工作正常,但第二个my()只有在我单击按钮时才工作,我想让它在窗口的任何地方单击时都有响应
我试着用eventlistener
制作手柄,让window.onclick
和两个按钮一起工作
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function my() {
document.getElementById("myaccountDropdown").classList.toggle("showed");
}
// Function to handle clicks on the window
function handleClick(event) {
// Check if the click target is NOT the "dropbtn" element
if (!event.target.matches(".dropbtn")) {
// Get references to all the dropdown-content elements
var dropdowns = document.getElementsByClassName("dropdown-content");
// Loop through the dropdown-content elements
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
// Check if the current dropdown-content element has the "show" class
if (openDropdown.classList.contains("show")) {
// If it does, remove the "show" class to close the dropdown
openDropdown.classList.remove("show");
}
}
}
// Check if the click target is the "clicked" element
if (event.target.matches(".clicked")) {
// Get references to all the dropdown-accountsettings elements
var dropdowns = document.getElementsByClassName("dropdown-accountsetting");
// Loop through the dropdown-accountsettings elements
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
// Check if the current dropdown-accountsettings element has the "showed" class
if (openDropdown.classList.contains("showed")) {
// If it does, remove the "showed" class to close the dropdown
openDropdown.classList.remove("showed");
}
}
}
}
// Add the event listener to the window
window.addEventListener("click", handleClick);
/* Dropdown Button */
.dropbtn {
color: whitesmoke;
width: 100%;
height: 100%;
display: flex;
align-content: stretch;
justify-content: center;
align-items: center;
flex-wrap: inherit;
cursor: pointer;
}
.dropbtn:hover {
color: blueviolet;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
top: 8px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #242222;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.dropbtn .fa {
position: relative;
right: -3px;
}
/* account logo setting */
.clicked {
color: whitesmoke;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
}
.clicked:hover {
color: blueviolet;
}
.account-logo {
position: relative;
display: inline-block;
}
.dropdown-accountsetting {
display: none;
position: absolute;
background-color: #242222;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-accountsetting a {
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-accountsetting a:hover {
background-color: #ddd;
}
.showed {
display: block;
}
<li>
<p onclick="myFunction()" class="dropbtn">
Categories
<i class="fa fa-caret-down icon" aria-hidden="true"> </i>
</p>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<div class="account-logo">
<p onclick="my()" class="dropbtn">
<i class="fa fa-user" aria-hidden="true"></i
><i class="fa fa-caret-down" aria-hidden="true"></i>
</p>
<div id="myaccountDropdown" class="dropdown-accountsetting">
<a href="#">Linked 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
1条答案
按热度按时间xwmevbvl1#
看起来你的第二个下拉菜单的问题是,它只在你点击按钮本身时切换,而不是当你点击窗口上的任何其他地方。
要解决这个问题,您可以修改事件侦听器以检查两个下拉菜单,并相应地删除相应的类。以下是修改后的事件侦听器函数代码: