1

Tengo desarrollado un menú similar a facebook y twitter la función es la siguiente:

  • Si das clic en el enlace aparece si vuelves a dar clic de nuevo en el mismo enlace desaparece.
  • Si das clic en el enlace aparece si das clic en un campo vació body desaparece.

Ahora este menú funciona correctamente no necesita ningún cambio para menú en configuraciones o para otro tipo de desarrollo es perfecto.

Ahora el problema es que trate implementar un formulario en el menú pero al dar clic en el campo input este me lo escode u desaparece.

código html

<div id="login">
<ul>
  <li id="dropdown2"><a href="#">Iniciar sesión <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <form>
          <input type="email" name="email">
          <input type="password" name="password">
          <button>Iniciar Sesión</button>
        </form>
    </ul>
  </li>
</ul>
</div>

estilo css

#login ul {
    float:left;
    width:100%;
    padding:0px;
}

#login  ul li {
    float:left;
    position:relative;
    list-style:none;
}

#login ul li a {
    color: #999999;
    float: none;
    line-height: 19px;
    padding: 9px 10px 11px;
    text-decoration: none;
    /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}

#login  ul li a:hover {
    color: #ffffff;
}

#login .dropdown-menu {
    display: none;
    left: -75px;/*10*/
    position: absolute;
    top:25px;/*35*/
    width:140px;
    background-color:#FFFFFF;
    background-color: rgba(255,255,255,0.98);
    background-clip: padding-box;
    border-radius:5px;
    /*border: 1px solid #e1e8ed;*/
    border: 0 solid rgba(0,0,0,0.25);
    /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

#login .dropdown-menu:after {
    border-bottom-color: rgba(255,255,255,0.98);
    border-bottom: 6px solid #FFFFFF;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    content: "";
    left: 115px;/*10*/
    position: absolute;
    top: -6px;
}

#login {
    float: left;
}

2 respuestas 2

2

El problema está en la propagación del evento click a partir del body y html que estás haciendo:

$('body,html').click(function(){
  $('.dropdown-menu').hide();
});

Por consiguiente cualquier clic va a ocultar el menú.


Una de tantas soluciones posibles es revisar si el clic proviene de un hijo del menú (clase dropdown-menu) o de sí mismo, y de ser así, lo ocultamos:

$(document).on('click', function (e) {
    if ($(e.target).closest(".dropdown-menu").length === 0) {
        $(".dropdown-menu").hide();
    }
});
3
  • Disculpa amigo el código funciona perfectamente ya no se me oculta el menú, pero tengo un inconveniente no se si es por el código javascript que tengo para bloquear el botón derecho y que deshabilita la opciones de copiar arrastrar entre otros borre este código y funciona pero al habilitar aquel código no funciona es decir no me permite escribir en los campos del formulario.
    – Otto
    Commented el 31 jul. 2016 a las 2:01
  • Bloquear el botón derecho es una pésima práctica que NO se debería hacer. Aún así, está fuera del alcance de esta pregunta y tampoco veo dicho código, sugeriría que hagas una nueva pregunta para ese problema. Si mi respuesta te fue útil y te funcionó, puedes considerar marcarla como aceptada.
    – Shaz
    Commented el 31 jul. 2016 a las 2:28
  • vale amigo gracias.
    – Otto
    Commented el 31 jul. 2016 a las 2:50
1

Creo que lo que quieres es evitar una propagación del evento. Se podría llegar a simplificar:

$('li#dropdown2').on('click', function() { // al hacer click en iniciar, muestra el form
  $(this).children('.dropdown-menu').fadeToggle('fast');
  return false;
});

$(document).on("click", function() { // al hacer click en body el elemento desaparece
  $('.dropdown-menu').fadeOut('fast');
  return false;
});

$('.dropdown-menu').on('click', function(evento) { // al hacer click en el formulario no desaparece
  evento.stopPropagation();
});
body {
  background: black;
}
#login {
  margin-left: 300px;
}
#login ul {
  float: left;
  width: 100%;
  padding: 0px;
}
#login ul li {
  float: left;
  position: relative;
  list-style: none;
}
#login ul li a {
  color: #999999;
  float: none;
  line-height: 19px;
  padding: 9px 10px 11px;
  text-decoration: none;
  /*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);*/
}
#login ul li a:hover {
  color: #ffffff;
}
#login .dropdown-menu {
  display: none;
  left: -75px;
  /*10*/
  position: absolute;
  top: 25px;
  /*35*/
  width: 140px;
  background-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.98);
  background-clip: padding-box;
  border-radius: 5px;
  /*border: 1px solid #e1e8ed;*/
  border: 0 solid rgba(0, 0, 0, 0.25);
  /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
#login .dropdown-menu:after {
  border-bottom-color: rgba(255, 255, 255, 0.98);
  border-bottom: 6px solid #FFFFFF;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  content: "";
  left: 115px;
  /*10*/
  position: absolute;
  top: -6px;
}
#login {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="login">
  <ul>
    <li id="dropdown2"><a href="#">Iniciar sesión <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <form>
          <input type="email" name="email">
          <input type="password" name="password">
          <button>Iniciar Sesión</button>
        </form>
      </ul>
    </li>
  </ul>
</div>

1
  • hola amigo eh copiado y pegado el código pero no funciona claro que al ejecutarlo aquí funciona pero al copiar el código tal como esta no me ejecuta de la misma forma como funciona al ejecutarlo en stackoverflow
    – Otto
    Commented el 31 jul. 2016 a las 1:46

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.