如何实现初始隐藏的HTML Div显示/隐藏切换功能？

嘿，你已经找对了核心方向——给目标Div的初始样式加上display: none;就能实现默认隐藏的效果！我来帮你把代码补全，并且分享一些更优雅的实现思路：

基础实现方案（和你的思路匹配） #

这是完整的可运行代码，直接就能用：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  margin-top: 20px;
  display: none; /* 关键：让Div默认隐藏 */
}
</style>
</head>
<body>

<p>点击按钮切换Div的显示状态</p>

<button onclick="myFunction()">切换显示/隐藏</button>

<div id="myDIV">
  这是我们要切换的Div内容！
</div>

<script>
function myFunction() {
  const targetDiv = document.getElementById("myDIV");
  // 判断当前显示状态，切换对应的display值
  if (targetDiv.style.display === "none") {
    targetDiv.style.display = "block";
  } else {
    targetDiv.style.display = "none";
  }
}
</script>

</body>
</html>

更推荐的优化方案（用CSS类控制） #

如果你想让代码更易维护（比如后续要加过渡动画、修改隐藏样式），推荐用CSS类切换的方式，把样式逻辑和JS逻辑分开：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  margin-top: 20px;
  /* 可选：加过渡动画让切换更平滑 */
  transition: all 0.3s ease;
}
/* 专门的隐藏类，所有隐藏逻辑都在这里 */
.hidden {
  display: none;
}
</style>
</head>
<body>

<p>点击按钮切换Div的显示状态</p>

<button onclick="toggleDiv()">切换显示/隐藏</button>

<!-- 初始给Div加上hidden类，实现默认隐藏 -->
<div id="myDIV" class="hidden">
  这是我们要切换的Div内容！
</div>

<script>
function toggleDiv() {
  const targetDiv = document.getElementById("myDIV");
  // 一行代码完成切换，不用手动判断display状态
  targetDiv.classList.toggle("hidden");
}
</script>

</body>
</html>

小提示 #

• 如果你需要给显示/隐藏加上平滑过渡，直接在#myDIV的样式里加transition属性就行（比如上面的例子），用类切换的方式更容易实现这种效果。
• 注意：如果你的Div初始是通过CSS类隐藏的，不要用targetDiv.style.display去判断状态——style属性只读取内联样式，最好用targetDiv.classList.contains('hidden')来判断。

内容的提问来源于stack exchange，提问作者darkchampionz