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

【问题标题】：Hiding button after collapse is toggled using Javascript折叠后隐藏按钮使用 Javascript 切换
【发布时间】：2019-01-05 20:37:03
【问题描述】：

我试图在按下“可折叠”按钮后隐藏它。

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";
    } 
});
}

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

【问题讨论】：

请正确写代码，你没有忘记加个开头<a ...>？

标签： javascript html button collapsable

【解决方案1】：

要隐藏您的button 并删除页面上按钮占用的空间，请在事件处理程序中的button 元素上使用.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 占用的空间并使其不可见，请使用.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>

【讨论】：

【解决方案2】：

解决问题的最短路径是

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

【讨论】：