Javascript切換顯示：block / none

Question

我的代碼問題如下。 我想要一個div元素，點擊一個+號時出現，點擊斧頭標志時消失。 消失的部分我可以搞清楚。 但不知何故，出現的部分不起作用。 有人可以幫我解決這個問題嗎？

 .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對象按鈕而不是代碼中的第一個？

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> 

---

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