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

问题描述

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

enter image description here

解决方法

是因为你的 after 只有当按钮有 Afficher toutes les infos 类时才有内容 collapsed 并且你的 HTML 开始没有这个类,所以你只需要默认添加 collapsed 类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>
,

那是因为在加载页面后不久,即使按钮已折叠,您的按钮也没有“折叠”类。也许 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>