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

Question

我想在填充或展开手风琴时更改文本。我在 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';
}

Answer 1

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

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

Answer 2

那是因为在加载页面后不久，您的按钮没有 'collapsed' 的 class，即使它已折叠。也许 bootstrap.js 只会在单击该按钮后触发 add/remove class 的事件。如果您按以下方式更正 index.html 以便手动为按钮提供初始值 class，那么它将起作用。

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

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

How to change the button text when the accordion is collapse?

html

css

collapse

pseudo-element

twitter-bootstrap