Question

在我的页面上，我有一个＆＃34;阅读更多＆＃34;按钮，当有人按下该按钮时，它会展开，以便用户可以阅读更多信息(button not pressed)。这就是用户按下＆＃34; Read More＆＃34;按钮(button pressed)。我在Stack Overflow上阅读了很多帖子，但无法找到解决方案。所以我希望按钮上的文字改为＆＃34; Read Less＆＃34;而不是停留＆＃34;阅读更多＆＃34;当用户点击它时。

JS / CSS / HTML：

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

＆＃13;

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 30%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
  left: 0;
  right: 0;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

＆＃13;

<button class="accordion">Read More</button>
<div class="panel">
  This appears when user presses "Read More"
</div>

＆＃13;

提前致谢！

Answer 1

在onclick处理程序中，您当前正在检查＆＃34;面板的状态＆＃34;并相应地调整样式。您可以同时调整点击按钮的.innerText。像这样：

if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    this.innerText = "Read More"; // here
} else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    this.innerText = "Read Less"; // and here
}

Answer 2

您可以更改if -- else区域内的按钮文本，您可以在其中更改div的视图，而无需创建其他测试，并且{{1}块位于按钮的单击方法中，您可以使用if -- else来定位按钮：

＆＃13;

this

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      this.innerText = "Read More"; // 'this' is the button
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      this.innerText = "Read Less"; // 'this' is the button
    }
  }
}

＆＃13;

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 30%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
  left: 0;
  right: 0;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

＆＃13;

Answer 3

只需像这样更改innerHTML：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      this.innerHTML = "Read More";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      this.innerHTML = "Read Less";
    }
  }
}

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 30%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
  left: 0;
  right: 0;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<button class="accordion">Read More</button>
<div class="panel">
  This appears when user presses "Read More"
</div>

Answer 4

只需切换按钮的 innerHTML 即可。

if (panel.style.maxHeight) {

    this.innerHTML = "Read More";
      panel.style.maxHeight = null;
    } else {

    this.innerHTML = "Read Less";
      panel.style.maxHeight = panel.scrollHeight + "px";
    }

＆＃13;

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
   if (panel.style.maxHeight) {
    
    this.innerHTML = "Read More";
      panel.style.maxHeight = null;
    } else {
    
    this.innerHTML = "Read Less";
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

＆＃13;

button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 14px;
  width: 30%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
  left: 0;
  right: 0;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

＆＃13;

<button class="accordion">Read More</button>
<div class="panel">
  This appears when user presses "Read More"
</div>

＆＃13;

Answer 5

您可以通过以下代码

来实现

if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      this.innerText = "Read More"; // 'this' is the button
} else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      this.innerText = "Read Less"; // 'this' is the button
}

如何在Click上更改按钮的文字？

5 个答案: