如何显示隐藏的div按钮的点击和隐藏时，不在焦点使用JS

Question

我正在尝试创建添加一种方法来显示按钮的div onclick，并在不聚焦时隐藏它/当用户单击div外。

我已经设法添加了一个按钮，可以显示一个隐藏的div，但我不知道如何使它再次隐藏当焦点丢失。

我读过这个:隐藏一个DIV当它失去焦点/模糊

…和其他文章，但我无法按照他们的方法去做。

请查看我的代码到目前为止:

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>

任何帮助都会很感激。提前感谢!

Answer 1

您可以使用以下代码:

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";
  }

并将onclick事件添加到父div

div onclick="hideDiv()" style="height: 100vh;">
  <div class="collapse" id="anchor-cards-list">Lorem Ipsum</div>
</div>

Answer 2

我个人会简化事情以分离关注点。向按钮(单击)添加事件侦听器以显示div，并在div上添加事件侦听器(模糊)以再次隐藏它。

document.getElementById('anchor-open-cards-list-btn').addEventListener('click', showDiv);
document.getElementById('anchor-cards-list').addEventListener('blur', hideDiv);

showDiv和hideDiv只处理元素的可见性。

Answer 3

使用jquery的简单方法

使用toggle()代替show/hide，因为这样更清晰简单。

$(document).ready(function(){
  $("#anchor-open-cards-list-btn").click(function(){
   $("#anchor-cards-list").toggle();
 });
});

或

function openCardsList() {
  $("#anchor-cards-list").toggle();
}

或

对于onblue，您也可以使用以下代码

function openCardsList() {
 $("#anchor-cards-list").css('display','block');
}
function hideD(){
 $("#anchor-cards-list").css('display','none');
}

在父div中添加onclick事件

div onclick="hideD()">
 <div id="anchor-cards-list">text</div>
</div>

Answer 4

我更喜欢在函数之外设置let窗口，以便您可以随时使用它。如果你只做这个处理显示/隐藏div同时onclick和onblur你不需要jquery。默认的javascript可以提供这些事件动作。

script.js

let card = document.getElementById('anchor-cards-list')
function openCard() {
  card.style.display = 'block'
}
function blurCard() { 
 card.style.display = 'none'
}

index . html

<div id="anchor-cards-list">Hello Text</div>
<button onclick="openCard()" onblur="blurCard()">Clik me</button>

Answer 5

const phoneCross=document.getElementById('phone-cross').addEventListener('click'，function(){

            console.log('clicked phone cross button');
            // cross button display none successful way
            document.getElementById('main-phone-div').style.display='none';