显示与隐藏

让网页元素玩躲猫猫

📖知识引入

👻display:none：隐身术

给元素设display:none，它就彻底消失——不仅看不见，连占的位置都让出来。改回display:block，它又回来了！网页魔法帽。

🎁常见玩法

点「详情」展开更多文字、点菜单图标弹出侧边栏、点小图看大图——你天天在用的这些功能，内核全是「显示与隐藏」。

🔀切换的逻辑

用一个变量当开关：现在是显示的就藏起来，是藏着的就显示出来。if/else一判断，一按一切换——这就是「开关」的心脏。

🎭classList.toggle

更优雅的玩法：给元素戴上/摘下一顶CSS「帽子」（class），样式提前藏在帽子里面。toggle一下，帽子戴上；再toggle，帽子摘下。

🤖AI秒懂需求

跟AI说「做一个可以展开收起的FAQ问答列表」，或「点汉堡图标弹出侧边栏」，折叠面板、抽屉菜单的代码马上到手。

💡

好交互像魔术：该出现的出现，该隐藏的隐藏！

🔍网页躲猫猫锦标赛

<button id="toggleBtn">显示/隐藏</button>
<div id="card" style="display: none;">
  我是被藏起来的卡片！
</div>

<script>
  let btn = document.getElementById("toggleBtn");
  let card = document.getElementById("card");

  btn.addEventListener("click", function () {
    if (card.style.display === "none") {
      card.style.display = "block";  // 现身
    } else {
      card.style.display = "none";   // 隐身
    }
  });
</script>

display切换的完整流程：

😐 初始状态：
┌──────────────────┐
│ [按钮] 【内容卡片】 │
└──────────────────┘

👆 点击「隐藏」后：
┌──────────────────┐
│ [按钮]            │
│（卡片消失，位置让出）│
└──────────────────┘

👆 再点击「显示」后：
┌──────────────────┐
│ [按钮] 【内容卡片】 │
└──────────────────┘
（完整归位！）

📌 为什么这招重要？

抖音评论区点开、网课章节折叠、游戏背包开关…… 你每天要玩它几十次！

右边代码：
一个按钮控制卡片
显示/隐藏的完整实现，
20行不到，功能完整。

🎯小测验

第1题：display:none的隐藏效果是？

第2题：「点一下展开、再点一下收起」的交互核心是什么？

第3题：下面哪个功能用到了「显示与隐藏」？

📝本课知识点

✓display:none彻底隐藏且不占位
✓展开收起、抽屉菜单全是显示隐藏
✓切换靠变量状态+if/else
✓classList.toggle是优雅开关
✓描述清楚玩法，AI帮你实现

第18课完成！继续探索下一课吧 🚀

⚡

上一课

第17课

下一课

第19课

⚡