Error in running jQuery similar pop-up twitter?

Navigation
1

I have developed a menu similar to facebook and twitter, the function is as follows:

  • If you click on the link it appears if you click again on the same link it disappears.
  • If you click on the link it appears if you click on an empty field body disappears.

Now this menu works correctly, it does not need any change to the menu in configurations or for another type of development it is perfect.

Now the problem is that I tried to implement a form in the menu but when I clicked on the field input , it would pick it up or disappear.

html code 

<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>

css style 

#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;
}
    
asked by Otto 28.07.2016 в 21:43
source

2 answers

2

The problem is in the propagation of the click event from the body and html that you are doing: 

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

Therefore any click will hide the menu.

One of many possible solutions is to check if the click comes from a child of the menu (class dropdown-menu) or from himself, and if so, we hide it: 

$(document).on('click', function (e) {
    if ($(e.target).closest(".dropdown-menu").length === 0) {
        $(".dropdown-menu").hide();
    }
});
    
answered by 28.07.2016 / 23:23
source
0

I think what you want is to avoid a propagation of the event. It could be simplified, I think. 

$('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>
    
answered by 28.07.2016 в 23:57
Question about MongoDB and NodeJS Problem when opening a program with Python