Veran tengo dos menu dropdowns los cuales se abren al clicar un boton(cada boton tiene su menu).Bien.El codigo de eso dos menu es el mismo a excepcion de que yo les hice cambios en las clases y Id para que a cada cual yo darle diferentes estilos con css y trabajar con sus codigos javascript
Cual es el problema?
El problema esta es que uno de ellos abre y cierra bien(funciona),pero el otro abre pero no cierra,al menos dandole al mismo de boton de nuevo.
No me entienden?
el menu que funciona yo lo puedo cerrar clicando en cualquier parte del documento.Pero el otro no,osea para cerrarlo tengo que dar de nuevo el boton que lo abre y yo lo quiero como el primero que cierre en cualquier parte.
Ademas creo que el problema es que hay conflictos entre ambos codigo javascript.Pero no se.
/* 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>