如何使用 HTML e JS 制作简单的可折叠文本文件

Question

我需要针对我的问题的想法和建议。 我想在简单的 HTML 页面中使用两个组合功能。 使用 COLLAPSIBLE 按钮显示从 TXT 文件导入的文本...这是我的代码，但加载时不会隐藏文本。谢谢你

编辑：如果有人需要它，这就是它的工作原理;-)

 <style>
.collapsible {
  background-color: #808080;
  color: orange;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
  </style>




<button class="collapsible">SERIE A GIRONE A</button>
<div class="content">
<p><object type="text/plain" data="serieA1.txt" id="txt" style="overflow: hidden; width: 532px; height: 395px;" height="395" width="532">SERIE A GIRONE A
</object></p>
</div>

Answer 1

如果要正确地将折叠默认行为应用于对象元素，则需要添加

class="collapse"

。

类似这样的：

object {
  width: 400px;
  height: 150px;
}

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

<!--includi file txt-->
<p><object type="text/plain" data="data:text/plain,contenuto file .txt con accentate" id="txt" class="collapse">
</object></p>

您可以在这里看到一些参考