You see I have two menu dropdowns which open when you click a button (each button has its own menu). Good. The code for these two menus is the same except that I made changes to the classes and Id so that each one I give him different styles with css and work with his javascript codes
What is the problem?
The problem is that one of them opens and closes fine (it works), but the other opens but doesn't close, at least by pressing the same button again.
They do not understand me?
I can close the menu that works by clicking anywhere in the document. But the other one doesn't, that is, to close it I have to press the button that opens it again and I want it as the first one to close anywhere.
I also think that the problem is that there are conflicts between the two javascript code. But I don't know.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
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("dropdowncontent");
var e;
for (e = 0; e < dropdowns.length; e++) {
var openDropdown = dropdowns[e];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
/*CODIGO PARA SEGUNDO DROPDOWN*/
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdownx").classList.toggle("showx");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtnx')) {
var dropdowns = document.getElementsByClassName("dropdowncontentx");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('showx')) {
openDropdown.classList.remove('showx');
}
}
}
}
<style type="text/css">
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
padding: 6px;
font-size: 16px;
border: none;
cursor: pointer;
height: 40px;
width: 80px;
}
/* Dropdown button on hover & focus */
.dropbtn:hover,
#dropbtn:focus {
background-color: transparent;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fdfdff;
min-width: 180px;
box-shadow: 0px 1px 6px 0px #6a6e6f;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #008c69
}
/* 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;
}
</style>
/*CODIGO PARA SEGUNDO DROPDOWN***/
<style> .dropbtnx {
background-color: #4CAF50;
color: white;
padding: 16p x;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtnx:hover,
.dropbtnx:focus {
background-color: #3e8e41;
}
.dropdownx {
position: relative;
display: inline-block;
}
.dropdowncontentx {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdowncontentx a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdownx a:hover {
background-color: #f1f1f1
}
.showx {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction1()" class="dropbtn" href="#">aa<i style="font-size: 16px;" class="fa fa-bars" aria-hidden="true"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="perfil.php?id=<?php echo $my_id;?>"><i class="fa fa-user" aria-hidden="true"></i><?php echo $nombre; ?></a>
<a href="configuracion.php?Id=<?php echo $my_id;?>"><i class="fa fa-cog" aria-hidden="true"></i>Configuracion</a>
<a href="start.php"><i class="fa fa-power-off" aria-hidden="true"></i>Cerrar sesion</a>
</div>
</div>
<!--CODIGO PARA SEGUNDO DROPDOWN-->
<div class='dropdownx'>
<button onclick='myFunction()' class='dropbtnx'>Solicitud enviada</button>
<div id='myDropdownx' class='dropdowncontentx'>
<a href='#'>Cancelar Solicitud</a>
<a href='#about'>About</a>
</div>
</div>
The problem is that you use the classes dropdowncontent and dropdown-content that are not the same
In the next section you use it with mid-hyphen:
you can choose to add the mid-hyphen to the first line or change the second and css.
The problem: there can only be one
onclick
but you're trying to associate multiple . When attaching multiple event handlersclick
to the window by doingwindow.onclick
, only the last one will be executed because it will overwrite the previous ones.The solution: associate the handlers using
addEventListener
yes, which allows you to associate multiple event handlers to the different elements of the DOM, executing all of them in the order of creation.You can find more information about the different methods to associate events in this other answer (also mine) . It explains better and you can see more details.
And here you can see your code working correctly using
addEventListener
(and adding the missing dash):