时间戳

首页 > 解决方案 > 关于 html/css/js 可折叠内容的问题

javascript - 关于 html/css/js 可折叠内容的问题

问题描述

我一直在寻找一些可折叠的东西，它们中的大多数似乎使用了一些似乎不需要的额外代码，或者我无法理解哈哈。无论如何，我做了一个超级简单的，在我的脑海和逻辑上它应该可以工作。但显然它得到了错误

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>

提前致谢！/因此

标签： javascripthtmlcss

解决方案

由于您已为该元素分配了类名，因此请使用 querySelector 而不是 ID 选择器：

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

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

作为一个 JQuery 爱好者，使用 JQuery 你只需要 1 行代码：

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

推荐阅读