javascript - 如何切换用JS显示和隐藏

Question

    <div class="warnAA1">
        <span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
            <button>&times;</button>
        </span>
        <span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
            <button> - </button>
        </span>
    </div>

我正在制作一个网站，我需要一些帮助来切换显示和不显示的 div，而 <span>我<button>要切换的是一个 div 部分，它下面有搜索和项目，它只显示带有内容的框，我想要用户能够切换可见性。这是我尝试过的：

    <div class="warnAA1">
        <span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
            <button>&times;</button>
        </span>
        <span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
            <button> - </button>
        </span>
    </div>

我只是坚持如何切换正在显示的内容。

标签： javascripthtmlcss

Answer 1

有几种方法可以做到这一点：我强烈建议您使用 id 不必担心查询多个元素的相对位置等。我还添加了一个切换按钮来展示它是如何工作的。

var show = document.getElementById("show");
var hide = document.getElementById("hide");
var warn = document.getElementById("warn");
var toggle = document.getElementById("toggle");

show.addEventListener("click", function() {
  warn.classList.remove("hide");
});

hide.addEventListener("click", function() {
  warn.classList.add("hide");
});

// Toggle logic
toggle.addEventListener("click", function() {
  warn.classList.toggle("hide");
});

.warnAA1 {
  background-color: #aaaaaa;
  min-height: 200px;
  transition: opacity .5s ease-in-out;
}

.warnAA1.hide {
  opacity: 0;
}

.abs {
  position: absolute;
  top: 10px;
  left: 10px;
}

<div id="warn" class="warnAA1">
</div>
<div class="abs">
  <button id="show">Show</button>
  <button id="hide">Hide</button>
  <button id="toggle">Toggle</button>
</div>