0

Estoy intentando que cuando se haga click en otro lugar que fuera el botón, ocultar el div, pero no lo consigo, no tengo ni idea de cómo hacer.

$(function(){
  
  $(document).on('click','#foo',function(){
    let div = $('#bar');
    if( div.css('display') === 'none' ){
      div.show();
    }
    
    else{
      div.hide();
    }
  });

})
#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

Se me ocurrió con

  $(document).on('click','html',function(e){
    if(e.eventTarget !== 'foo'){
      $('#bar').hide();
    }
  });

Pero en primera se traba la página y en segunda no está correcto el código, solo simula lo que pretendo conseguir.

2 respuestas 2

0

La forma que se te ocurrió es la correcta, sólo que en lugar de delegar al tag html debes delegarlo al body

$(document).on('click','body',function(e){
    if(e.eventTarget !== 'foo'){
      $('#bar').hide();
    }
});
0

Debes primero asociar el evento al body, para que coja todos los objetos que hay, y además debes controlar que el botón no continúe con el evento mediante event.stopPropagation();, evitando así que el evento se propague más abajo.

$(document).on('click', 'body', function(e) {
  $('#bar').toggle();
});

$(document).on('click', 'button', function(e) {
  e.stopPropagation();
});
#foo {
  min-width: 35%;
}

#bar {
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

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.