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 需要运行一个元素: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>

<小时/>

使用类的示例，还更智能地隐藏加号

.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>