Javascript切换显示：block / none

Question

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

＆＃13;

＆＃13;

.button {
	cursor: pointer;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

描述

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

运行querySelector时，您需要使用#表示ID，.表示CSS类。运行querySelector需要运行一个元素：this，document是两个例子。

＆＃13;

＆＃13;

.button {
	cursor: pointer;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.button {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;