You see I have two dropdowns menu which are opened by clicking a button (each button has its menu). Well. The code of that two menu is the same except that I made changes in the classes and Id so that to each I give different styles with css and work with their javascript codes
What is the problem?
The problem is that one of them opens and closes well (works), but the other opens but does not close, at least giving the same button again.
Do not understand me?
the menu that works I can close it by clicking anywhere in the document. But the other does not, I mean to close it I have to give again the button that opens it and I want it as the first to close anywhere. / p>
Also I think the problem is that there are conflicts between both javascript code. But I do not 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>