HTML 中使用 Bootstrap 实现可折叠的外部文本文件加载-html教程-PHP中文网

a style="color:#f60; text-decoration:underline;" title= "html"href="https://m.php.cn/zt/15763.html" target="_blank">html>

HTML 中使用 Bootstrap 实现可折叠的外部文本文件加载

本文介绍如何在 HTML 页面中结合 Bootstrap 的 Collapse 组件与标签，实现点击按钮动态显示/隐藏从外部 .txt 文件（或内联文本）加载的内容，并确保初始状态为隐藏。

本文介绍如何在 html 页面中结合 bootstrap 的 collapse 组件与 `

要在网页中实现“点击按钮展开/收起外部文本内容”，关键在于两点：正确初始化 Bootstrap 折叠行为，以及确保目标元素默认隐藏。原代码中元素未添加 class="collapse"，导致 Bootstrap 无法识别其为可折叠容器，因此页面加载时内容直接显示，违背了“默认隐藏、点击展开”的交互预期。

以下是完整、可运行的解决方案（基于 Bootstrap 3.4 + jQuery）：



  <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><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>

✅ 核心要点说明：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

元素必须添加 class="collapse"，否则 Bootstrap 的 collapse 插件不会对其应用 display: none 初始样式；
data-target 值（如 #txt）需与目标元素的 id 完全一致；
若使用真实外部 .txt 文件（如 test.txt），请确保该文件与 HTML 同域且路径正确（推荐放在同一目录下）；
如仅用于测试，可将 data="test.txt" 替换为 data="data:text/plain,这里是内联文本内容"，避免跨域或路径问题；
默认无宽高，建议通过 CSS 设置 width/height 并启用滚动（overflow: auto），以保证长文本可读。

⚠️ 注意事项：

现代浏览器对本地 file:// 协议下的加载 .txt 有安全限制，开发时请使用本地服务器（如 VS Code Live Server、Python http.server）运行，而非直接双击打开 HTML；
Bootstrap 4+ 已弃用 data-toggle 语法，改用 data-bs-toggle，若升级版本需同步调整；
不支持 CORS，若需跨域加载，应改用 fetch() + innerHTML 或（配合服务端代理）等更健壮方案。