时间戳

首页 > 解决方案 > Bootstrap 5单击时更改折叠按钮上的文本

javascript - Bootstrap 5单击时更改折叠按钮上的文本

问题描述

我到处寻找这个解决方案，并找到了 bootstrap 3 和 4 的处理方法，但没有找到版本 5。

我有以下代码：

<div class="p-3">9 Members Online
  <a class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>
</div>

<div class="collapse" id="hiddenContent">
  <div class="card card-body bg-transparent">
    Member 1. <br><br> Member 2.<br><br> Member 3.<br><br> Member 4.<br><br> Member 5.<br><br> Member 6.<br><br> Member 7.<br><br> Member 8.<br><br> Member 9.<br><br>
  </div>
</div>

我希望文本“显示”在单击时显示为“隐藏”。

标签： javascripttwitter-bootstrapbootstrap-5

解决方案

这是你想要达到的目标吗？只需单击“运行代码片段”按钮，看看这是否有效。

function toggleText() {
  var x = document.getElementById("toggle");
  if (x.innerHTML === "Show") {
    x.innerHTML = "Hide";
  } else {
    x.innerHTML = "Show";
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

<a onclick="toggleText()" class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>

           <div class="collapse" id="hiddenContent">
               <div class="card card-body bg-transparent">
                       Member 1. <br><br>
                   Member 2.<br><br>
                   Member 3.<br><br>
                   Member 4.<br><br>
                   Member 5.<br><br>
                   Member 6.<br><br>
                   Member 7.<br><br>
                   Member 8.<br><br>
                   Member 9.<br><br>
               </div>
           </div>

推荐阅读