本文介绍如何在 HTML 页面中结合 Bootstrap 的 Collapse 组件与 标签，实现点击按钮动态显示/隐藏从外部 .txt 文件（或内联文本）加载的内容，并确保初始状态为隐藏。
本文介绍如何在 html 页面中结合 bootstrap 的 collapse 组件与 `
要在网页中实现“点击按钮展开/收起外部文本内容”，关键在于两点：正确初始化 Bootstrap 折叠行为，以及确保目标元素默认隐藏。原代码中 <object></object> 元素未添加 class="collapse"，导致 Bootstrap 无法识别其为可折叠容器，因此页面加载时内容直接显示，违背了“默认隐藏、点击展开”的交互预期。
以下是完整、可运行的解决方案（基于 Bootstrap 3.4 + jQuery）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可折叠的外部文本加载</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery 和 Bootstrap JS（必须按顺序引入） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
/* 可选：为 object 元素设置合理尺寸，提升可读性 */
#txt {
width: 100%;
max-width: 600px;
height: 180px;
border: 1px solid #ddd;
background-color: #f9f9f9;
font-family: monospace;
font-size: 14px;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div class="container mt-4">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#txt">
Toggle External Text
</button>
</div>
<!-- 外部文本容器：必须添加 class="collapse" 才能被 Bootstrap 控制显隐 -->
<div class="container mt-3">
<object type="text/plain"
data="test.txt"
id="txt"
class="collapse">
<!-- fallback 内容（当 test.txt 加载失败时显示） -->
[Failed to load test.txt — please check file path or network.]
</object>
</div>
</body>
</html>✅ 核心要点说明：
立即学习“前端免费学习笔记（深入）”；
-
<object></object>元素必须添加class="collapse"，否则 Bootstrap 的 collapse 插件不会对其应用display: none初始样式； -
data-target值（如#txt）需与目标元素的id完全一致； - 若使用真实外部
.txt文件（如test.txt），请确保该文件与 HTML 同域且路径正确（推荐放在同一目录下）； - 如仅用于测试，可将
data="test.txt"替换为data="data:text/plain,这里是内联文本内容"，避免跨域或路径问题； -
<object></object>默认无宽高，建议通过 CSS 设置width/height并启用滚动（overflow: auto），以保证长文本可读。
⚠️ 注意事项：
- 现代浏览器对本地
file://协议下的<object></object>加载.txt有安全限制，开发时请使用本地服务器（如 VS Code Live Server、Pythonhttp.server）运行，而非直接双击打开 HTML； - Bootstrap 4+ 已弃用
data-toggle语法，改用data-bs-toggle，若升级版本需同步调整； -
<object></object>不支持 CORS，若需跨域加载，应改用fetch()+innerHTML或<iframe></iframe>（配合服务端代理）等更健壮方案。
通过以上配置，页面加载时文本区域将默认隐藏，点击按钮即可平滑展开/收起——简洁、可靠，符合轻量级文档展示场景需求。
