文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS/JavaScript表折叠:有第一个条来展开我的表，我如何添加第二个底部条来再次折叠它？

问CSS/JavaScript表折叠:有第一个条来展开我的表，我如何添加第二个底部条来再次折叠它？
EN

Stack Overflow用户

提问于 2019-10-11 09:29:07

回答 1查看 42关注 0票数 1

我在一个表中使用CSS和JavaScript来折叠其内容的部分：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>Log for Today</title>
<style>
table {
    font-family: arial, sans-serif;
    width: 100%;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 0.9em;
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    border-collapse: collapse;
    text-align: left;
    padding: 8px;
}

.folding {
  background-color: #6699ff;
/*  color: white; */
  cursor: pointer;
/*  padding: 0 8px;  */
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .folding:hover {
/*  background-color: #555; */
  background-color: #999999;
}

.content {
  padding: 0 10px;  
  background-color: #f1f1f1;
  max-height: 0; 
    transition: max-height 0.3s ease-out;
    overflow: auto;
}

.Tabla01 tr:nth-of-type(1) {background: #33cc33;}
.Tabla01 tr:nth-of-type(2) {background: #33cc33;}
.Tabla01 tr:nth-of-type(3) {background: #f9f906;}

.Tabla02 tr:nth-of-type(1) {background: #f9f906;}
.Tabla02 tr:nth-of-type(2) {background: #f9f906;}

.Tabla03 tr:nth-of-type(1) {background: #33cc33;}
.Tabla03 tr:nth-of-type(2) {background: #33cc33;}

.Tabla04 tr:nth-of-type(1) {background: #33cc33;}
.Tabla04 tr:nth-of-type(2) {background: #33cc33;}

}
</style>
</head>
<body>
<h2>Log for today</h2>
<table class="Tabla01">
<tr><td>2019-09-30</td><td>08:40</td><td>Balancer ON</td>
<tr><td>2019-03-28</td><td>13:05</td><td>Internet Bandwidth OK</td>
<tr><td>2019-07-01</td><td>19:27</td><td>Ethernet WAN1 OK</td>
</table>
<button class="folding">( Details - Click to unfold )</button>
<div class="content">
    <table class="folding Tabla02">
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 is responding</td></tr>
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 has a ping below 100 ms - OK</td></tr>
    </table>
</div>
<table class="Tabla03">
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-1 responding</td></tr>
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-2 responding</td></tr>
</table>

<script>
var coll = document.getElementsByClassName("folding");
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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>

</body>
</html>

结果很好，但是我想在展开表的末尾添加一个第二条(有时展开的桌子很长，所以在我看来是个好主意)，应该再次折叠它，。这张图片就是我想要达到的一个例子：

下面是添加了新的(不起作用的)条的代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<title>Network Log for Today</title>
<style>
table {
    font-family: arial, sans-serif;
    width: 100%;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 0.9em;
    border: 1px solid #dddddd;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #dddddd;
    border-collapse: collapse;
    text-align: left;
    padding: 8px;
}

.folding {
  background-color: #6699ff;
  cursor: pointer;
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .folding:hover {
  background-color: #999999;
}

.foldingend {
  background-color: #6693ff;
  cursor: pointer;
    border: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .foldingend:hover {
  background-color: #999999;
}

.content {
  padding: 0 10px;  
  background-color: #f1f1f1;
  max-height: 0; 
    transition: max-height 0.3s ease-out;
    overflow: auto;
}

.Tabla01 tr:nth-of-type(1) {background: #33cc33;}
.Tabla01 tr:nth-of-type(2) {background: #33cc33;}
.Tabla01 tr:nth-of-type(3) {background: #f9f906;}

.Tabla02 tr:nth-of-type(1) {background: #f9f906;}
.Tabla02 tr:nth-of-type(2) {background: #f9f906;}

.Tabla03 tr:nth-of-type(1) {background: #33cc33;}
.Tabla03 tr:nth-of-type(2) {background: #33cc33;}

.Tabla04 tr:nth-of-type(1) {background: #33cc33;}
.Tabla04 tr:nth-of-type(2) {background: #33cc33;}

}
</style>
</head>
<body>
<h2>Network Log for today</h2>
<table class="Tabla01">
<tr><td>2019-09-30</td><td>08:40</td><td>Balancer ON</td>
<tr><td>2019-03-28</td><td>13:05</td><td>Internet Bandwidth OK</td>
<tr><td>2019-07-01</td><td>19:27</td><td>Ethernet WAN1 OK</td>
</table>
<button class="folding">( Details - Click to unfold )</button>
<div class="content">
    <table class="folding Tabla02">
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 is responding</td></tr>
<tr><td>2019-06-18</td><td>09:15</td><td>Ethernet Card connected to Internet line 1 has a ping below 100 ms - OK</td></tr>
    </table>
<button class="foldingend">( Details - Click to fold )</button>
</div>
<table class="Tabla03">
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-1 responding</td></tr>
<tr><td>2019-07-01</td><td>19:27</td><td>WiFi AP-2 responding</td></tr>
</table>

<script>
var coll = document.getElementsByClassName("folding");
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.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>

</body>
</html>

但我不知道该如何再增加折叠功能到这第二个酒吧。实际上，我复制-粘贴(在我的代码末尾)展开的JavaScript，所以我必须承认，我没有完全理解它。

有人能帮帮我吗？

javascript

html-table

回答 1

Stack Overflow用户

发布于 2019-10-11 09:56:37

由于您将折叠按钮放入要折叠的父节点，因此应该选择父元素而不是兄弟节点进行折叠。

试一试：

<script>
var unfoldBtns = document.getElementsByClassName("folding");
for (var i = 0; i < unfoldBtns.length; i++) {
  unfoldBtns[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}

var foldBtns = document.getElementsByClassName("foldingend");
for (var i = 0; i < foldBtns.length; i++) {
  foldBtns[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.parentNode; // <-- select parent instead of siblings
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + 350 + "px";
    } 
  });
}
</script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58338275

复制

相似问题

问CSS/JavaScript表折叠:有第一个条来展开我的表，我如何添加第二个底部条来再次折叠它？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/JavaScript表折叠:有第一个条来展开我的表，我如何添加第二个底部条来再次折叠它？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/JavaScript表折叠:有第一个条来展开我的表，我如何添加第二个底部条来再次折叠它？
EN