1

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>

2 respuestas 2

3

El problema esta en que usas las clase dropdowncontent y dropdown-content que no son las mismas

var dropdowns = document.getElementsByClassName("dropdowncontent");

En la siguiente sección la usas con guion medio:

<div id="myDropdown" class="dropdown-content">

puedes optar por agregarle el guion medio a la primer linea o cambiar la segunda y el css.

1
  • Tienes razón ese era un error,pero no del problema que intento resolver,porque aun no funciona.Sigue igual.
    – luis
    Commented el 14 oct. 2016 a las 4:07
1

Como bien indica percho en su respuesta, hay un problema con el nombre de la clase en el onclick, pero incluso si corriges el nombre y añades el guión que falta, seguirá fallando por el motivo que explico abajo.

El problema: sólo puede haber un onclick pero estás intentando asociar múltiples. Al asociar múltiples controladores del evento click a la ventana haciendo window.onclick, sólo se ejecutará el último porque sobreescribirá a los anteriores.

La solución: asocia lo controladores usando addEventListener que sí que permite asociar múltiples controladores de eventos a los diferentes elementos del DOM ejecutándose todos ellos en el orden de creación.

Puedes encontrar más información sobre los diferentes métodos para asociar eventos en esta otra respuesta (también mía). En ella se explica mejor y podrás ver más detalles.

Y aquí puedes ver tu código funcionando correctamente al usar addEventListener (y añadir el guión que falta):

/* 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.addEventListener("click", function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    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.addEventListener("click", 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>

8
  • Por alguna extraña razón cuando agrego el código que pusiste ninguno funcionan.Que sera?
    – luis
    Commented el 15 oct. 2016 a las 12:25
  • @luis Acabo de quitar un par de console.log que podrían crear problemas con versiones antiguas de IE. ¿Que navegador usas?¿te funciona si lo ejecutas arriba?¿Cómo has incorporado el código de arriba a tu código?¿ves algún error en la consola de JS?
    – Alvaro Montoro
    Commented el 15 oct. 2016 a las 12:27
  • utilizo Google chrome y he incorporado el codigo tal como lo pusiste arriba.Ademas veo que en el sitio(aqui) funcionn bien los dos
    – luis
    Commented el 15 oct. 2016 a las 12:42
  • y si,hay varios errores en la consola.Uno es que la "myFunction1()" is not defined. 2-Missing ")" after argument list.
    – luis
    Commented el 15 oct. 2016 a las 12:44
  • ¿Cómo falla?¿Funciona para uno o para ninguno?¿Podrías compartir el código que te falla de alguna manera? Puede haber algo que no esté bien o que cree algún conflicto con tu código, porque como dices, funciona aquí sin problemas. ¿qué errores recibes?
    – Alvaro Montoro
    Commented el 15 oct. 2016 a las 12:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.