关于使用html/css/js可折叠内容的问题

Question

我一直在寻找一些可折叠文件，其中大多数似乎使用了一些似乎不需要的额外代码，或者我无法理解哈哈。不管怎样，我做了一个超级简单的，在我的头脑和逻辑中，它应该起作用。但显然它得到了的错误

app.js:4 Uncaught TypeError: Cannot read property 'style' of null
at btn (app.js:4)
at HTMLButtonElement.onclick (index.html:9)

如果有人能很好地向我解释为什么这不起作用，这样我可能会更好地理解逻辑？这是一个片段：

var content = document.querySelector(".content");
function btn(){
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "block";
}
}

.content {
display: none;
overflow: hidden;
color: red;
}

<button type="button" onClick="btn();">collapsible</button>
<div class="content">
<p> inner content bla bla bla</p>
</div>

提前感谢/Thuse

Answer 1

因为您已经为该元素分配了类名，所以使用querySelector而不是ID选择器：

var content = document.querySelector(".content");

请注意，querySelectot返回查询的第一次出现。因此，如果您有多个元素，则需要(querySelectorAll(".blah"))[x]来选择第X个元素。

作为JQuery的粉丝，使用JQuery只需要一行代码：

function btn(){
$(".content").toggle()
}