Implementé una herramienta de clic para abrir una ventana, haga clic dentro de la ventana para cerrar la ventana, haga clic afuera para cerrar la ventana. Pero encontré una dificultad, es decir, si de acuerdo con la forma en que escribo actualmente, quiero volver a hacer clic en la herramienta para cerrar la ventana, ¡y parece que este requisito no se puede lograr!
No sé cómo cambiar el código de esta manera, para que la ventana se pueda cerrar haciendo clic en la herramienta.
Espero contar con su ayuda, estaré muy agradecido con todos los que me ayudaron.
const className = ['delet_wrap', 'txt', 'btn_group', 'consider', 'confirm', 'tool']; $('.tool').on('click', function(e) { $(document).on('click', function(e) { if (className.includes(e.target.className)) { $('.delet_wrap').css('display', 'inline-block'); } else { $('.delet_wrap').css('display', 'none'); } }) }) body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .tool { position: relative; text-decoration: none; background-color: yellow; border: 1px solid #222; border-radius: 6px; padding: 10px; color: #222; } .tool .delet_wrap { padding: 20px; position: absolute; bottom: -90px; left: 10px; background-color: #ccc; border: 1px solid #222; display: none; z-index: 10; } .tool .delet_wrap p { text-align: center; } .tool .delet_wrap .btn_group { display: flex; white-space: nowrap; margin-top: 10px; } .tool .delet_wrap .btn_group .consider { background-color: #fff; border: 1px solid #222; margin-right: 10px; } .tool .delet_wrap .btn_group .confirm { text-decoration: none; border: 1px solid #222; margin-left: 10px; background-color: #222; color: #fff; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:;" class="tool">tool <div class="delet_wrap" id="js-delet_wrap"> <p class="txt">Are you sure you want to close?</p> <div class="btn_group"> <button class="consider">consider</button> <button class="confirm">confirm</button> </div> </div> </a>