amablemente haciendo una pregunta, mi objetivo es
haga clic en div class="head"
mostrar u ocultar div class="toggle"
o haga clic fuera de div para ocultar div class="toggle"
después de agregar addEventListner dentro de la declaración if , solo ejecuta un solo clic y luego ya no alterna Cómo solucionarlo, ¡gracias!
$(document).ready(function() { $(document).on('click', '.head', function(elem) { // click div with class = head var toggle = elem.target.getElementsByClassName('toggle')[0] if (toggle.style.display = "none") { toggle.style.display = ""; document.addEventListener('click', function() { toggle.style.display = "none"; }) } else { toggle.style.display = "none"; } }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="head">expand <div class="toggle" style="display:none;"> <p>number 1</p> <p>number 2</p> </div> </div> </div>Prueba esto ;)
$(document).ready(function() { var toggle = document.getElementsByClassName("toggle")[0]; document.addEventListener('click', function() { if (toggle.style.display !== "none") { toggle.style.display = "none"; } }); $(document).on('click', '.head', function(elem) { // click div with class = head if (toggle.style.display = "none") { toggle.style.display = ""; } else { toggle.style.display = "none"; } }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="head">expand <div class="toggle" style="display:none;"> <p>number 1</p> <p>number 2</p> </div> </div> </div>Logré arreglar el script usando once:true; o one() que recomienda @freedomn-m
Gracias chicos por todos los comentarios y respuestas.
puro js
$(document).ready(function() { $(document).on('click', '.head', function(elem) { // click div with class = head var toggle = elem.target.getElementsByClassName('toggle')[0] if (toggle.style.display == "none") { toggle.style.display = ""; document.addEventListener('click',function(){ toggle.style.display = "none"; }, { once: true, }); } else { toggle.style.display = "none"; } }) })jquery
$(document).ready(function() { $(document).on('click', '.head', function(elem) { // click div with class = head var toggle = elem.target.getElementsByClassName('toggle')[0] if (toggle.style.display == "none") { toggle.style.display = ""; $(document).one('click',function(){ toggle.style.display = "none"; }) } else { toggle.style.display = "none"; } }) })