Javascript 切换显示：block/none

Question

我的以下代码有问题。我想要一个 div 元素，它在点击 + 号时出现，在点击 x 号时消失。我能弄清楚的消失部分。但不知何故出现的部分不起作用。有人可以帮我解决这个问题吗？

.button {
 cursor: pointer;
}

<span onclick="element.querySelector('.more').style.display = 'block';" class="button">&plus;
<div id="more">
<span onclick="this.parentElement.style.display = 'none';" class="button">&times;
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

编辑：不幸的是，建议的 this.querySelector('#more').style.display = 'block'"; 不起作用。如何访问按钮旁边的#more id 而不是代码中的第一个？

Answer 1

描述

span需要关闭<span>stuff</span>

当运行宁querySelector时，您需要使用#作为ID，.用于CSS 类。运行 querySelector 需要一个元素运行 on: this, document 是两个例子。

.button {
 cursor: pointer;
}

// need to select by ID #, search the document, close the span
<span onclick="document.querySelector('#more').style.display = 'block';" class="button">&plus;</span>
<div id="more">
// close the span
<span onclick="this.parentElement.style.display = 'none';" class="button">&times;</span>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

使用 Class 的示例，也更智能地隐藏加号

.button {
  cursor: pointer;
}

<div class="wrapper">
  <span onclick="this.parentElement.querySelector('.more').style.display = 'block'; this.style.display = 'none';" class="button" style="display: none">&plus;</span>
  <div class="more">
    <span onclick="this.parentElement.style.display = 'none'; this.parentElement.parentElement.querySelector('span').style.display = 'block';" class="button">&times;</span>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Javascript 切换显示：block/none

Javascript toggle display: block/none

javascript

toggle

描述

使用 Class 的示例，也更智能地隐藏加号