About clickable dropdown menu

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. 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. 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>

About clickable dropdown menu

Question

1 answers

solution1
0 ACCPTED 2017-05-09 08:19:25

About clickable dropdown menu

Question

1 answers

solution1 0 ACCPTED 2017-05-09 08:19:25

solution1
0 ACCPTED 2017-05-09 08:19:25