手风琴折叠时如何更改按钮文本？答案

【问题标题】：How to change the button text when the accordion is collapse?手风琴折叠时如何更改按钮文本？
【发布时间】：2021-08-09 05:45:18
【问题描述】：

我想在填充或展开手风琴时更改文本。我在 Bootstrap 4 上。

目前可以，但是第一次加载页面时，按钮文字不正确。

如果我展开和折叠，文字是正确的。

为什么页面加载时这不是正确的文本？

index.html：

  <div id="readmorecollapse">
    <div class="collapse" id="collapserm" aria-expanded="false">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
          <p>TEST<p/>
        </div>
      </div>
    </div>
    <div id="readmorebutton">
      <button role="button" class="btn btn-outline-dark btn-sm w-100" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>

style.css：

#readmorecollapse #collapserm.collapsing {
  height: 7rem;
}

#readmorecollapse #collapserm.collapse:not(.show) {
  display: block;
  height: 7rem;
  overflow: hidden;
}

#readmorecollapse #readmorebutton button.collapsed::after {
  content: 'Afficher toutes les infos';
}

#readmorecollapse #readmorebutton button:not(.collapsed)::after {
  content: 'Cacher les infos';
}

【问题讨论】：

标签： html css twitter-bootstrap pseudo-element collapse

【解决方案1】：

是因为你的after 只有当按钮有collapsed 类并且你的HTML 开始时没有这个类时才有内容Afficher toutes les infos，所以你只需要在默认html 中添加collapsed 类，就在那里：

<div id="readmorecollapse">
    <div class="collapse" id="collapserm" aria-expanded="false">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
          <p>TEST<p/>
        </div>
      </div>
    </div>
    <div id="readmorebutton">
      <button role="button" class="btn btn-outline-dark btn-sm w-100 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>

【讨论】：

【解决方案2】：

这是因为在加载页面后不久，即使您的按钮已折叠，您的按钮也没有“折叠”类。也许 bootstrap.js 只会在单击该按钮后触发添加/删除类的事件。如果您按以下方式更正您的 index.html，以便手动给按钮初始类，那么它将起作用。

<div id="readmorecollapse">
    <div class="collapse" id="collapserm" aria-expanded="false">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
          <p>TEST<p/>
        </div>
      </div>
    </div>
    <div id="readmorebutton">
      <button role="button" class="btn btn-outline-dark btn-sm w-100 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
      </button>
    </div>

【讨论】：