Si div no está oculto, click cualquier lugar para ocultar

Intento hacer una div oculta por defecto y mostrar haciendo clic en un button. Para cerrar el div, puedo hacer clic en el button o en cualquier otro lugar de la pantalla. A continuación está mi bash, pero la parte de cierre no está funcionando. Aprecio si alguien me puede indicar la implementación correcta o quizás una mejor manera de hacerlo.

$('#theDiv').hide(); $("#showDivBtn").click(function(){ $("#theDiv").show(); }); if ( !$('#theDiv:hidden') ) { $(document).click(function() { $('#theDiv').hide(); }); $('#theDiv').click(function(e) { e.stopPropagation(); return false; }); } }); 

5 Solutions collect form web for “Si div no está oculto, click cualquier lugar para ocultar”

colocar el controller de events completo dentro de una condición solo verifica la condición en la primera carga de página, y el controller de events probablemente nunca esté conectado, pruébalo así en su lugar:

 $('#theDiv').hide(); $(document).on('click', function(e) { if ( $(e.target).closest('#showDivBtn').length ) { $("#theDiv").show(); }else if ( ! $(e.target).closest('#theDiv').length ) { $('#theDiv').hide(); } }); 

VIOLÍN

intenta usar

if( !$('.theDiv' ).is( ':visible' ) )

en lugar de

if ( !$('.theDiv:hidden') )

testing esto

  <script type="text/javascript"> $('.opendiv').hide(); $(document).click(function (event) { var $target = $(event.target); if ($target.attr('id') == 'addAccordion') { if ($('.opendiv').is(':hidden')) { $('.opendiv').show(); } else { $('.opendiv').hide(); } } else if ($target.closest('.opendiv').length > 0) { } else { $('.opendiv').hide(); } }) </script> <div> <input id="addAccordion" type="button" value="ADD COMMENT" /> </div> <div id="rs" class="opendiv"> <h2> Welcome to ASP.NET! </h2> <p> To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website"> www.asp.net</a>. </p> <p> You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409" title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>. </p> </div> 

No creo que pueda orientar el document con un controller .click como ese.

En lugar de hacerlo de manera que puedas hacer clic literalmente en cualquier lugar para cerrar el DIV, haz que parezca de esa manera. Coloque una DIV clara detrás de la que desea que sea capaz de cerrar y haga que cubra toda la pantalla. Luego puede adjuntar su manejador de clics a eso.

HTML:

 <button>Click me to show the DIV</button> <div class="container"> <div class="thediv"> <p>I'm the DIV</p> </div> </div> 

JavaScript:

 $(document).ready(function () { var $button = $("button"); var $container = $("div.container"); $button.click(function () { $container.show(); }); $container.click(function () { $container.hide(); }); }); 

CSS:

 div.container { display: none; position: fixed; top: -5%; left: -5%; width: 110%; height: 110%; } div.thediv { position: absolute; top: 30%; left: 10%; background-color: gray; color: white; padding-top: 1em; border-radius: 5px; width: 50%; } p { background-color: black; text-align: center; padding: 2em; } 

Con fines de demostración, hice el background DIV visible en este violín

Prueba esto,

 $('#theDiv').hide(); $("#showDivBtn").click(function(){ $("#theDiv").toggle(); }); $(document).on("click" , function(event){ if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv") { $('#theDiv').hide(); } }); 
  • jQuery: envíe un formulario solo si no se está ejecutando AJAX actualmente en la página
  • colorbox se rompe en el atributo rel cuando se carga bxslider
  • JavaScript: Agregar un controller onClick sin sobreescribir el existente
  • Evento de Mousehold en Jquery
  • ¿Existe un complemento de información sobre herramientas de JQuery que admita contenido HTML y coloca automáticamente información sobre herramientas?
  • La mejor forma de crear un <a> enlace con href vacío
  • Administrar caching sincrónicamente en js
  • Jquery ajax llame con el signo '+'
  • jquery mouseenter activado en ios Safari y otros dispositivos táctiles. Cómo detenerlo?
  • jQuery: agrega una fila a la tabla y la seleccionas en DOM
  • Control deslizante jQuery con valor en el control deslizante / control deslizante
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.