HTML实现Collapsible按钮加载外部TXT：初始文本未隐藏问题求助

问题 #

需要实现点击折叠按钮控制外部TXT文件内容的显示/隐藏，但当前页面加载时TXT文本并未隐藏，代码如下：

<div class="container">
<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">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
enim ad minim veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat.
</div>
</div>

<!--引入TXT文件-->
<p><object type="text/plain" data="test.txt" id="txt">
contenuto file .txt con accentate
</object></p>

问题原因 #

1. 控制TXT内容的<object>元素（或其容器）未添加Bootstrap折叠组件所需的collapse类，导致页面加载时无法默认隐藏。
2. 若未正确引入Bootstrap的CSS和JavaScript文件，折叠交互功能也会失效（你的代码中未体现这部分依赖，需确认）。

解决方案 #

步骤1：给目标元素添加collapse类 #

将包含<object>的<p>标签添加collapse类，并把id="txt"绑定到这个容器上（避免直接对<object>元素产生样式冲突），确保初始状态隐藏：

<p class="collapse" id="txt">
  <object type="text/plain" data="test.txt">
    contenuto file .txt con accentate
  </object>
</p>

步骤2：引入Bootstrap依赖 #

在页面<head>中引入Bootstrap CSS，在<body>末尾引入jQuery和Bootstrap JS（Bootstrap折叠功能依赖jQuery）：

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
  <!-- 页面内容 -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Collapsible TXT Content</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <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">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<!--引入TXT文件-->
<p class="collapse" id="txt">
  <object type="text/plain" data="test.txt">
    contenuto file .txt con accentate
  </object>
</p>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

额外建议 #

• 若不需要原来的#demo折叠内容，可直接删除该部分，避免逻辑混淆。
• 若不想使用CDN资源，可下载Bootstrap和jQuery的本地文件进行引入。

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