使用 Javascript 切换折叠后隐藏按钮

Question

我试图在按下 "collapsible" 按钮后将其隐藏。

activities.html:

<button class="collapsible"> <i class="fa fa-angle-down"></i></a></button>

Controller.js:

    var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var gallery1 = this.nextElementSibling;
    if (gallery1.style.maxHeight){
      gallery1.style.maxHeight = null;
    } else {
      gallery1.style.maxHeight = gallery1.scrollHeight + "px";
    } 
});
}

如果有人能帮我解决这个问题，我将不胜感激！

Answer 1

要隐藏您的 button 并删除页面上按钮占用的 space ，请在 [=14] 上使用 .style.display = 'none' =] 事件处理程序中的元素：

var coll = document.getElementsByClassName("collapsible");

for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");    
    
    var gallery1 = this.nextElementSibling;
    
    if (gallery1.style.maxHeight) {
      gallery1.style.maxHeight = null;
    } else {
      gallery1.style.maxHeight = gallery1.scrollHeight + "px";
    }
    
    this.style.display = 'none';
  });
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="collapsible"><a><i class="fa fa-angle-down"></i></a></button>

要让页面上的 button 占用 space 并使其不可见，请使用 .style.visibility = 'hidden':

var coll = document.getElementsByClassName("collapsible"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var gallery1 = this.nextElementSibling; if (gallery1.style.maxHeight) { gallery1.style.maxHeight = null; } else { gallery1.style.maxHeight = gallery1.scrollHeight + "px"; } this.style.visibility = 'hidden'; }); }

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <button class="collapsible"><a><i class="fa fa-angle-down"></i></a></button>

Answer 2

解决您的问题的最短方法是

<button class="collapsible" onclick="this.style.display = 'none';">

使用 Javascript 切换折叠后隐藏按钮

Hiding button after collapse is toggled using Javascript

html

javascript

button

collapsable