时间戳

首页 > 解决方案 > 可折叠 Div 的 JavaScript 全部折叠/显示全部切换按钮

javascript - 可折叠 Div 的 JavaScript 全部折叠/显示全部切换按钮

问题描述

我的网站上有一些可折叠的 div，例如：http ://dogs.bluskye.net/seeya/ （照片中不是我；））使用下面的 JavaScript/CSS 和简化的 html 示例。

我一直在寻找一种创建“全部折叠/全部显示”按钮的方法，但由于我真的不懂 JavaScript，所以在使用我看到的示例时遇到了麻烦。

我花了很多时间来修改我正在使用的当前 JavaScript/CSS，所以我真的不想为不同的系统废弃它——有人可以帮我创建一个按钮，单击该按钮可以在隐藏/之间切换根据我已经在使用的 .inside div 类显示所有内容？

谢谢！！

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

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (!content.style.display || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsible {
  background-color: #007784;
  color: #FFFFFF;
  cursor: pointer;
  width: 97%;
  border: 2px solid #000000;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  text-align: center;
  outline: none;
  font-size: 18px;
  font-weight: bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin-top: 3px;
  padding: 0px;
}

button.collapsible.active {
  border: 2px solid #000000;
  border-radius: 15px;
}

.collapsible:hover {
  background-color: #0066FF;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  margin-top: 3px;
}

.active {
  background-color: #007784;
  border-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
  margin-top: 3px;
}

.inside {
  padding: 0;
  width: 97%;
  display: block;
  overflow: hidden;
  border-top: 0px;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  background-color: #FFFFFF;
  border-radius: 0px 0px 15px 15px;
}

/*unrelated*/
.trials {width:100%;}
<button type="button" class="collapsible">Standard Novice</button>
<div class="inside">
  <table class="trials" cellspacing="1" cellpadding="2px">
    <tr>
      <td width="33%">GSDCO</td>
      <td width="33%">BTCWWA</td>
      <td width="33%">PAC</td>
    </tr>
    <tr>
      <td width="33%">January 1, 2020</td>
      <td width="33%">January 1, 2020</td>
      <td width="33%">January 1, 2020</td>
    </tr>
  </table>
</div>

<button type="button" class="collapsible">Jumpers Novice</button>
<div class="inside">
  <table class="trials" cellspacing="1" cellpadding="2px">
    <tr>
      <td width="33%">PNWSSC</td>
      <td width="33%">MHDPC</td>
      <td width="33%">GSDCO</td>
    </tr>
    <tr>
      <td width="33%">March 1, 2020</td>
      <td width="33%">March 2, 2020</td>
      <td width="33%">March 3, 2020</td>
    </tr>
  </table>
</div>

标签： javascriptcss

解决方案

而不是使用内联样式：

.style.display = "none"

使用类：

.classList.toggle('hide');

.hide { display: none }

演示

const col = document.querySelectorAll(".collapsible");

for (let c of col) {
  c.addEventListener("click", collapse);
}

function collapse(e) {
  this.classList.toggle("active");
  const content = this.nextElementSibling;
  content.classList.toggle('hide');
}

const all = document.querySelector(".all");

all.addEventListener('click', collapseAll);

function collapseAll(e) {
  const col = document.querySelectorAll('.collapsible');
  const con = document.querySelectorAll('.content');

  if (e.target.matches('.all')) {
    this.classList.toggle("active");

    col.forEach((button, index) => {
      if (e.target.matches('.active')) {
        button.classList.add('active');
        con[index].classList.remove('hide');
      } else {
        button.classList.remove('active');
        con[index].classList.add('hide');
      }
    });
  }
}
body {
  overflow-y: scroll;
  font: 900 18px/1.5 Verdana;
}

button {
  display: block;
  background-color: #007784;
  color: #FFF;
  cursor: pointer;
  width: 97%;
  border: 2px solid #000;
  border-radius: 15px;
  text-align: center;
  outline: none;
  margin: 3px auto 0;
  padding: 3px 7px;
  font: inherit;
}

.collapsible.active {
  border-radius: 15px 15px 0px 0px;
  border-bottom: 0px;
}

.collapsible:hover,
.all:hover {
  background-color: #0066FF;
}

.content {
  padding: 0;
  width: 96.25%;
  display: block;
  overflow: hidden;
  border: 2px solid #000;
  border-top: 0px;
  background-color: #FFF;
  border-radius: 0px 0px 15px 15px;
  margin: 0 auto;
  font: 500 16px/1.5 Arial;
}

.hide {
  display: none;
}

.trials {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0px;
}

td {
  width: 33%;
  padding: 1.5px;
  text-align: center;
}

.all::before {
  content: 'Show ';
}

.all.active::before {
  content: 'Hide ';
}
<button class="all active" type="button">All</button>
<button class="collapsible active" type="button">Novice</button>
<section class="content">
  <table class="trials">
    <tr>
      <td>GSDCO</td>
      <td>BTCWWA</td>
      <td>PAC</td>
    </tr>
    <tr>
      <td>January 1, 2020</td>
      <td>January 1, 2020</td>
      <td>January 1, 2020</td>
    </tr>
  </table>
</section>

<button class="collapsible active" type="button">Standard</button>
<section class="content">
  <table class="trials">
    <tr>
      <td>PNWSSC</td>
      <td>MHDPC</td>
      <td>GSDCO</td>
    </tr>
    <tr>
      <td>March 1, 2020</td>
      <td>March 2, 2020</td>
      <td>March 3, 2020</td>
    </tr>
  </table>
</section>

推荐阅读