Javascript 函数仅在点击 2 次按钮后执行

Question

我尝试制作一个更改 div 可见性的按钮。

首先，我在按钮中添加“onclick”事件并编写此函数：

function showElement() {
  var element = document.querySelector('.blocks-fnd-div');
    if (element.style.visibility == 'hidden') {
      element.style.visibility = 'visible';
    }
    else {
      element.style.visibility = 'hidden';
    }
}

但只有第二次点击后才有效。 然后我尝试只使用 javascript 并且我完成了这段代码：

$('.appr-btn').click(function() {
  var element = document.querySelector('.blocks-fnd-div');
    if (element.style.visibility == 'hidden') {
      element.style.visibility = 'visible';
    }
    else {
      element.style.visibility = 'hidden';
    }
})

但是只要我不熟悉这个方法，它就不起作用。 如果您能帮助我，我将不胜感激！

Answer 1

我更喜欢使用 CSS 类选择器而不是 javascript 来更改 CSS 属性。

对于我的答案，我首先在顶部声明两个对象，以便稍后引用它们。

然后我向 btn 添加一个单击事件侦听器。在按钮中，我只需在 div 上切换一个名为“active”的类。

在CSS中，我将div的默认状态设置为不显示（也可以是可见性=隐藏）。然后在CSS中，我给该div的.active状态显示块，但也可以是visibility =visible。

const apprBtn = document.querySelector(".appr-btn");
const blocksDiv = document.querySelector(".blocks-fnd-div");

apprBtn.addEventListener("click",(e) => {
    blocksDiv.classList.toggle("active");
});

.blocks-fnd-div{
  display:none;
}

.blocks-fnd-div.active{
  display:block;
}

<button class="appr-btn">Toggle Div</button>
<div class="blocks-fnd-div">blocks-fnd-div</div>