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(); } }); 
  • Enviar consulta de búsqueda y get resultado de la búsqueda sin actualizar
  • Biblioteca de JavaScript para crear aplicaciones web similares a las de un escritorio: ExtJS, jQuery, YahooUI, Mocha, SproutCore, Cappuccino, etc.
  • Desactivar el button Jquery Asp.net
  • Reemplazar el primer carácter dentro de la label
  • Diferencia entre jQuery.isPlainObject () y jQuery.isEmptyObject ()
  • Dividir una cadena en palabras ha resultado en una split en letras
  • document.dispatchEvent () no funciona en Firefox
  • onBlur () no funciona correctamente
  • ¿Hay un método en angularJS que sea igual a getJSON?
  • Cómo flotar diferentes tamaños DIV a la izquierda en perfecto estilo de cuadrícula?
  • jQuery: ¿cómo se desactiva todo dentro de un div? pero aún así mantener todo visible?
  • ¿Hay una forma de browser cruzada para información sobre herramientas?
  • El evento IE9 Mousemove no se activa durante Mousepress
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.