关于可点击的下拉菜单

Question

I follow this link to try to make a clickable dropdown menu. 我点击此链接尝试创建可点击的下拉菜单。

I notice the code from the link is for one dropdown menu and I think this code is for create the dropdown menu. 我注意到链接中的代码用于一个下拉菜单，我认为该代码用于创建下拉菜单。

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>

I try to create another two dropdown menus so I copy the code above twice 我尝试创建另外两个下拉菜单，所以我将上面的代码复制了两次

2nd dropdown 
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>
</div>

3rd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown3</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>

I don't edit anything inside the tag and tag so I click Run on link to see the result. 我没有在标签和标签内进行任何编辑，因此我单击“在链接上运行”以查看结果。

Only the first dropdown menu (the original one) can show the menu, the other two dropdown menu do not show anything. 只有第一个下拉菜单（原始菜单）可以显示菜单，其他两个下拉菜单则不显示任何内容。

I guess the reason is the second dropdown menu and the third dropdown menu do not have proper content inside the and tag. 我想原因是第二个下拉菜单和第三个下拉菜单在and标记内没有适当的内容。 So I start to modify the code in and tag. 因此，我开始修改和标记中的代码。

Here is the full code the I added for the second dropdown and the third dropdown menu. 这是我为第二个下拉菜单和第三个下拉菜单添加的完整代码。

<!DOCTYPE html>
<html>
<head>
<style>

/*1st dropdown*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}


/*2nd dropdown*/
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}

.dropdown2 {
position: relative;
display: inline-block;
}

.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown2 a:hover {background-color: #f1f1f1}

.show2 {display:block;}

/*3rd dropdown*/
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropbtn3:hover, .dropbtn2:focus {
background-color: #3e8e41;
}

.dropdown3 {
position: relative;
display: inline-block;
}

.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown3 a:hover {background-color: #f1f1f1}

.show3 {display:block;}

</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

1st dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>

2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>
</div>

3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
<a href="#home">Home3</a>
<a href="#about">About3</a>
<a href="#contact">Contact3</a>
</div>
</div>

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
  }
  }
  }
  }

//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {

var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show2')) {
    openDropdown.classList.remove('show2');
  }
}
}
}

//for 3rd dropdown

function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {

var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show3')) {
    openDropdown.classList.remove('show3');
  }
}
}
}

</script>
</body>
</html>

When I run the code, all buttons can open the dropdown menu when clicked. 当我运行代码时，单击所有按钮都可以打开下拉菜单。 However, when I click outside of the dropdown menus, only the third button can close the dropdown menu, the first and the second button still open the dropdown menu. 但是，当我在下拉菜单之外单击时，只有第三个按钮可以关闭下拉菜单，而第一个和第二个按钮仍会打开下拉菜单。

Here are my questions. 这是我的问题。

Copy another two sets of code for create another two dropdown menu seems not a good practice as the code will become messy, not good for debug and even if there is an update, I have change the code multiple times. 复制另外两套代码以创建另外两个下拉菜单似乎不是一个好习惯，因为代码会变得混乱，不利于调试，即使有更新，我也会多次更改代码。

However, if don't copy another two sets of code, the other two dropdown menu will not work. 但是，如果不复制另外两组代码，则另外两个下拉菜单将不起作用。

Even I copy another two sets of code for create another two dropdown menu, I don't understand the dropdown menus do not close when the mouse click outside of them. 即使我复制了另外两套代码来创建另外两个下拉菜单，我也不理解当鼠标从菜单中单击时下拉菜单不会关闭。

Grateful for your advice please. 请感谢您的建议。 Thank you. 谢谢。

Answer 1

You are overriding three times window.onclick event function. 您将覆盖window.onclick事件函数的三倍。 Only the last function launches. 仅启动最后一个功能。 If you combine the three functions in one, it works. 如果将三个功能合而为一，则可以使用。

Your code now: 现在的代码：

 <!DOCTYPE html> <html> <head> <style> /*1st dropdown*/ .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #f1f1f1} .show {display:block;} /*2nd dropdown*/ .dropbtn2 { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn2:hover, .dropbtn2:focus { background-color: #3e8e41; } .dropdown2 { position: relative; display: inline-block; } .dropdown-content2 { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content2 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown2 a:hover {background-color: #f1f1f1} .show2 {display:block;} /*3rd dropdown*/ .dropbtn3 { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn3:hover, .dropbtn2:focus { background-color: #3e8e41; } .dropdown3 { position: relative; display: inline-block; } .dropdown-content3 { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content3 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown3 a:hover {background-color: #f1f1f1} .show3 {display:block;} </style> </head> <body> <h2>Clickable Dropdown</h2> <p>Click on the button to open the dropdown menu.</p> 1st dropdown <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </div> </div> 2nd dropdown <div class="dropdown2"> <button onclick="myFunction2()" class="dropbtn2">Dropdown2</button> <div id="myDropdown2" class="dropdown-content2"> <a href="#home">Home2</a> <a href="#about">About2</a> <a href="#contact">Contact2</a> </div> </div> 3rd dropdown <div class="dropdown3"> <button onclick="myFunction3()" class="dropbtn3">Dropdown3</button> <div id="myDropdown3" class="dropdown-content3"> <a href="#home">Home3</a> <a href="#about">About3</a> <a href="#contact">Contact3</a> </div> </div> <script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } //for 2nd dropdown function myFunction2() { document.getElementById("myDropdown2").classList.toggle("show2"); } //for 3rd dropdown function myFunction3() { document.getElementById("myDropdown3").classList.toggle("show3"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } if (!event.target.matches('.dropbtn2')) { var dropdowns = document.getElementsByClassName("dropdown-content2"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show2')) { openDropdown.classList.remove('show2'); } } } if (!event.target.matches('.dropbtn3')) { var dropdowns = document.getElementsByClassName("dropdown-content3"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show3')) { openDropdown.classList.remove('show3'); } } } } </script> </body> </html>

关于可点击的下拉菜单

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-09 08:19:25

关于可点击的下拉菜单

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-09 08:19:25

解决方案1
0 已采纳 2017-05-09 08:19:25