本文介绍如何使用 Bootstrap 的 Collapse 组件实现可折叠区域，并将外部 .txt 文件内容（支持中文及重音字符）嵌入其中，确保页面加载时默认隐藏、点击后正确展开/收起。
本文介绍如何使用 bootstrap 的 collapse 组件实现可折叠区域，并将外部 `.txt` 文件内容（支持中文及重音字符）嵌入其中，确保页面加载时默认隐藏、点击后正确展开/收起。
要实现“点击按钮显示/隐藏外部文本文件内容”的功能，核心在于两点：正确初始化 Collapse 行为 和 确保外部内容容器符合 Bootstrap 的折叠规范。原代码中 元素未添加 class="collapse"，导致 Bootstrap 无法识别其为可折叠目标，因此始终可见。
✅ 正确实现步骤
-
引入 Bootstrap 3.4.1（含 jQuery 和 Bootstrap JS/CSS）
注意：Collapse 依赖 jQuery 和 Bootstrap JavaScript，必须按顺序引入：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><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>
-
为
添加class="collapse"并指定唯一 ID
这是关键——只有带collapse类的元素才能被data-toggle="collapse"控制。同时建议设置宽高样式以提升可读性：
<style>
#txt {
width: 100%;
max-width: 600px;
height: 180px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
</style><!-- 折叠触发按钮 --><button type="button" class="btn btn-info" data-toggle="collapse" data-target="#txt">
Simple collapsible
</button>
<!-- 外部文本容器（默认隐藏） -->
<object type="text/plain" data="test.txt" id="txt" class="collapse"></object>
? 提示：
data="test.txt"要求test.txt与 HTML 文件同源（同域），且服务器需允许跨域读取（若本地双击打开file://协议，浏览器会因安全策略阻止加载——请使用本地服务器如Live Server插件或 Python 的python -m http.server启动）。
-
兼容特殊字符（如带重音的意大利文）
确保test.txt文件以 UTF-8 编码保存（无 BOM），并在 HTML中声明编码：
<meta charset="UTF-8">
若需快速测试（绕过文件读取限制），可用 data:text/plain, 方式内联内容（仅限简单文本）：
<object type="text/plain" data="data:text/plain;charset=utf-8,contenuto%20file%20.txt%20con%20accentate" id="txt" class="collapse"></object>
⚠️ 注意：URL 编码需对空格（
%20）、重音符号（如à→%C3%A0）等进行转义；生产环境仍推荐使用真实.txt文件 + 正确服务部署。
? 替代方案（更现代 & 可靠）
Bootstrap 3 已停止维护，如项目允许，推荐升级至 Bootstrap 5+ 并改用 fetch() + innerHTML 动态加载，兼顾语义化与兼容性：
<button type="button" class="btn btn-primary" onclick="loadText()">Load Text</button>
<div id="txt-content" class="collapse"></div>
<script>
async function loadText() {
try {
const res = await fetch('test.txt');
const text = await res.text();
document.getElementById('txt-content').innerHTML = '<pre class="brush:php;toolbar:false;" style="white-space: pre-wrap;">' + text + '</script>
'; const bsCollapse = new bootstrap.Collapse(document.getElementById('txt-content'), { toggle: true }); } catch (err) { console.error("Failed to load text:", err); } }
✅ 总结
- 必须为被控制元素添加
class="collapse"，否则 Bootstrap 不生效； -
支持text/plain加载，但需注意同源策略与编码问题； - 开发调试时优先使用本地 HTTP 服务，避免
file://协议限制； - 长期项目建议迁移到现代 Fetch API + Bootstrap 5，提升可维护性与安全性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
