I got this dropdown from w3school but the dropdown closes only when you click on button again. How to make it close by clicking anywhere except search and dropdown.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
I got this dropdown from w3school but the dropdown closes only when you click on button again. How to make it close by clicking anywhere except search and dropdown.
Add an event listener to the body that removes the "show" class.. you probably want to make sure the target is not the button or the input though...
document.body.addEventListener("click", function(e){
if(!e.target.classList.contains("dropbtn") && e.target.id != "myInput") document.getElementById("myDropdown").classList.remove("show");
});
document.body.addEventListener("click", function(e){
if(!e.target.classList.contains("dropbtn") && e.target.id != "myInput") document.getElementById("myDropdown").classList.remove("show");
});
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
Related
So the scenario is this:
I have a range of cells in google sheets -> A1:A. It has Names.
I want to create an HTML form that pulls information from those cells and lists them in a dropdown.
It should allow searching and filtering in the dropdown.
I found this tutorial that helps me create a button and filter for data. I might have a way to get the data range from there, but I can't (don't know how) to make the resulted value (after search) become the value of the cell.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</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");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</body>
</html>
I can't get the value selected to become the field value (like click it and it becomes the value).
I imagine i can get the range in the script section and pass it to the filter function.
But one problem at a time.
I am really new at HTML, so any input would help !
Here's one approach:
// Listen on the 'click' event inside the myDropdown element:
document.querySelector("#myDropdown").addEventListener("click", e =>{
// If the click was triggered by an <a> element:
if (e.target.nodeName !== "A"){
return;
}
// Set the value of the selected text to the input value:
document.querySelector("#myInput").value = e.target.textContent;
// Or, you can get the href value, minus the #
// document.querySelector("#myInput").value = e.target.getAttribute("href").slice(1);
})
Check the comments on the ADDITIONAL CODE for more details.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</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");
}
// ADDITIONAL CODE >>
// Listen on the 'click' event inside the myDropdown element"
document.querySelector("#myDropdown").addEventListener("click", e =>{
// If the click was triggered by an <a> element:
if (e.target.nodeName !== "A"){
return;
}
// Set the value of the selected text to the input value:
document.querySelector("#myInput").value = e.target.textContent;
})
// << ADDITIONAL CODE
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
</body>
</html>
I have been trying to solve this issue for some days now but just giving me a lot of time to crack my brain and yet doesn't get the solution to it.
What I want to solve is that, when I click on each button, I want its dropdown to show just below its own button rather than all the dropdown showing at the left side of the screen and secondly, when it show just below its button, the content should change.
Thanks.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
let dropdowns = document.getElementsByClassName("dropdown-content");
let i;
for (i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
nav {
display: flex;
}
.dropbtn {
font-size: 12px;
border: none;
outline: none;
text-align: center;
color: #f2f2f2;
width: 155px;
padding: 14px 16px;
background-color: inherit;
font-family: serif;
text-transform: capitalize;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
height: 200px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
padding-bottom: 20px;
padding-top: 40px;
opacity: .9;
}
.dropdown-content a {
color: blue;
padding: 12px 20px;
text-decoration: none;
display: block;
width: 100%;
font-size: 12px;
background-color: ;
border-bottom: 1px solid gray;
}
.dropdown a:hover {
background-color: gray;
}
.show {
display: block;
}
<nav>
<div class="dropdown">
<button class="dropbtn" id="active" onclick="myFunction()">new
</button>
<div class="dropdown-content" id="myDropdown">
link 1
link 2
link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">fresh
</button>
<div class="dropdown-content" id="myDropdown">
link 4
link 5
link 6
</div>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">naija
</button>
<div class="dropdown-content" id="myDropdown">
link 7
link 8
link 9
</div>
</div>
</nav>
What your code is doing right now is creating three dropdown elements. Then, when a button is clicked, you are executing myFunction(), which gets #myDropdown. An element's id is, quoting the MDN Docs, "unique in a document". However, you have three elements with the same ID. So, when you execute document.getElementById("myDropdown") on line two of your JS code, it will find the first instance of #myDropdown and toggle the show class on that one element.
The provided code has the following changes:
Removed inline events. It is better practice to use addEventListener instead of inline events like onclick in your HTML.
Better let and const usages.
const dropdowns = Array.from(document.getElementsByClassName("dropdown-content"));
const dropdownButtons = Array.from(document.getElementsByClassName('dropbtn'));
let currentDropdown = 0;
let dropdownAmount = 0;
dropdownButtons.forEach(function(dropdownBtn, index) {
dropdownBtn.addEventListener('click', function(e) {
e.stopPropagation();
dropdowns[index].classList.toggle('show');
currentDropdown = index;
dropdownAmount++;
if (dropdownAmount > 1) { // closes other dropdowns if more than one is open
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show') && i !== currentDropdown) {
openDropdown.classList.remove('show');
}
}
dropdownAmount = 1;
}
});
});
window.addEventListener('click', function(event) {
for (let i = 0; i < dropdowns.length; i++) {
const openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
dropdownAmount = 0;
}
});
nav {
display: flex;
}
.dropbtn {
font-size: 12px;
border: none;
outline: none;
text-align: center;
color: #f2f2f2;
width: 155px;
padding: 14px 16px;
background-color: inherit;
font-family: serif;
text-transform: capitalize;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
height: 200px;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
padding-bottom: 20px;
padding-top: 40px;
opacity: .9;
}
.dropdown-content a {
color: blue;
padding: 12px 20px;
text-decoration: none;
display: block;
width: 100%;
font-size: 12px;
background-color: ;
border-bottom: 1px solid gray;
}
.dropdown a:hover {
background-color: gray;
}
.show {
display: block;
}
<nav>
<div class="dropdown">
<button class="dropbtn" id="active">new</button>
<div class="dropdown-content">
link 1
link 2
link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">fresh</button>
<div class="dropdown-content">
link 4
link 5
link 6
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><i>naija</i></button> <!-- demonstration for op's problem -->
<div class="dropdown-content">
link 7
link 8
link 9
</div>
</div>
</nav>
EDIT: Fixed the code so that child elements of the .dropbtns also open the dropdown. The .dropbtn click event was working, but then it also fired the window click event. The window click event checked the event target, which was not a button, so it closed all the dropdowns. Now, if the .dropbtn click event is fired, e.stopPropagation is called which prevents the window click event from firing.
im making my website just using html code (with no bootstrap). I want to make a Dropdown List with a list of specs. The problem is once it is done when i open my List - the content which is going below does not move more below so it overlaps on the List.. Look at this picture to see what i have.
The ideal idea is to make the following:
So here when i open the List the below contet gose more below automatically (But this is bootstrap so i can not just copy that because i am using only html)
My html code is this:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
And css :
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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: #ddd;}
.show {display: block;}
And javascript:
<script>
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');
}
}
}
}
</script>
Example: https://codepen.io/anon/pen/VNojBe
Remove position: absolute; from .dropdown-content
Change to position: relative in .dropdown-content
After clicking on toggle how to change button value is click value on toggle list in angularJs ?
I have write this code please help me ? I have also explain the code how it work i need only after clicking on toggle how to change button value is click value on toggle list in angularJs .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
min-width: 162px;
position:reletive;
font-weight:bold;
}
.dropbtn:after{
content: '';
border-top: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
left: 75px;
position: absolute;
top: 37px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border:1px solid #3498DB;
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;
border-top:2px solid #3498DB;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
Write a html code
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</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');
}
}
}
}
</script>
</body>
</html>
Once you have got the selected value within the javascript, assign that to the button value, using the following code:
document.getElementById("button_Name").innerHTML = selectedValueFromDropdown;
In your window.onclick function, you can add this fix :
if (!event.target.matches('.dropbtn a')) {
document.getElementById("test").innerHTML = event.target.innerHTML;
}
So that if you click on one of your "options" button, the innerHTML (the text) of your dropdown button takes the one of the option.
Full code (or CodePen.io :
/* 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');
}
}
if (!event.target.matches('.dropbtn a')) {
document.getElementById("test").innerHTML = event.target.innerHTML;
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
min-width: 162px;
position:reletive;
font-weight:bold;
}
.dropbtn:after{
content: '';
border-top: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
left: 75px;
position: absolute;
top: 37px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border:1px solid #3498DB;
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;
border-top:2px solid #3498DB;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</body>
</html>
And by the way, in your code, you don't use AngularJS :)
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">
Home
About
Contact
</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">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown3</button>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
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">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</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.
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">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</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>