Estoy tratando de crear una forma de mostrar un div al hacer clic en un botón y ocultarlo cuando no está enfocado/cuando el usuario hace clic fuera del div.
Ya logré agregar un botón que puede mostrar un div oculto, pero no sé cómo volver a ocultarlo cuando se pierde el foco.
He leído esto: ocultar un DIV cuando pierde el foco/desenfoque
...y otros artículos, pero no pude seguirlos para que funcionara...
Por favor, vea mi código hasta ahora:
function openCardsList() { let window = document.getElementById("anchor-cards-list"); window.style.display = "block"; } $(document).not("#anchor-cards-list").click(function() { $('#anchor-cards-list').hide(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div> <button id="anchor-open-cards-list-btn" onclick="openCardsList();">Collapse Maincard</button>Cualquier ayuda sería apreciada. ¡Gracias de antemano!
puedes usar este código:
function openCardsList() { let window = document.getElementById("anchor-cards-list"); window.style.display = "block"; } function hideDiv(){ let window = document.getElementById("anchor-cards-list"); window.style.display = "none"; }y agregue el evento onclick al div principal
div onclick="hideDiv()" style="height: 100vh;"> <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div> </div>Yo personalmente simplificaría las cosas para separar las preocupaciones. Agregue un detector de eventos al botón (haga clic) para mostrar su div y un detector de eventos (borroso) en el div para ocultarlo nuevamente.
document.getElementById('anchor-open-cards-list-btn').addEventListener('click', showDiv); document.getElementById('anchor-cards-list').addEventListener('blur', hideDiv);Luego, showDiv y hideDiv solo manejan la visibilidad del elemento.
prefiero dejar la ventana fuera de la función para que pueda usarla en cualquier momento que lo necesite. y también si solo hace esto para manejar mostrar/ocultar div mientras hace clic y desdibuja, no necesita jquery. el javascript predeterminado puede entregar esas acciones de eventos.
guión.js
let card = document.getElementById('anchor-cards-list') function openCard() { card.style.display = 'block' } function blurCard() { card.style.display = 'none' }índice.html
<div id="anchor-cards-list">Hello Text</div> <button onclick="openCard()" onblur="blurCard()">Clik me</button>