JavaScript可折叠-用于可折叠Div的所有按钮

问题描述 投票:0回答:3

我的网站上有一些可折叠的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>
javascript css
3个回答
0
投票

这里是解决方案,尽管我使用过jQuery,但是您可以使用javascript实现相同的功能,逻辑将保持不变,如果您需要我仅将其转换为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 content = this.nextElementSibling;
    if (!content.style.display || content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

var colAll = document.getElementById("colapseAll");
var insideDiv = document.getElementsByClassName("inside");
colAll.addEventListener("click", function() {
  $(insideDiv).hide();
  $('.collapsible').addClass('active');
});
.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%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="colapseAll">collapse all</button>
<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>

0
投票

这是您使用纯Javascript的解决方案。您只需要用[>]包装脚本

document.addEventListener("DOMContentLoaded", function(){
   ...
});

以确保内容在脚本之前已加载

document.addEventListener("DOMContentLoaded", function(){
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";
    }
  });
}
});

用脚本替换它,您就很好了


0
投票

这是您要做什么?我可以修改任何内容,所以请解释一下这是否不能满足您的要求,我可以在投票否决之前对其进行编辑。谢谢!

© www.soinside.com 2019 - 2024. All rights reserved.