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

提前致謝！ /因此

Answer 1

由於您已為該元素分配了類名，因此請使用 querySelector 而不是 ID 選擇器：

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

請注意 querySelectot 返回查詢的第一次出現。 因此，如果您有多個元素，則需要(querySelectorAll(".blah"))[x]來選擇第(querySelectorAll(".blah"))[x]個元素。

作為一個 JQuery 愛好者，使用 JQuery 你只需要 1 行代碼：

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