展开所有和折叠所有表格功能

Question

我已经为葡萄酒产区和可折叠表格创建了选项卡，以使用 HTML、CSS 和 Javascript（感谢 W3 Schools）在选项卡中显示各个葡萄酒数据。 我正在努力使用一些功能，以便能够一次显示或隐藏可折叠设备中的所有葡萄酒。

我希望能够为可折叠表格提供两个选项： Expand All和Collapse All 。 这超出了我的专业知识。

这是代码的一部分（选项卡和 1 个可折叠表）：

 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 === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } function openWine(evt, wineName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(wineName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();

 <style> /* Style the tab */.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; text-decoration: none; } /* Style the buttons inside the tab */ @media screen and (max-width: 600px) {.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 12px 12px; transition: 0.3s; font-size: 12.6px; text-decoration: none; } } @media screen and (min-width: 768px) {.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 15px; text-decoration: none; } } /* Change background color of buttons on hover */ @media screen and (max-width: 600px) {.tab button:hover { background-color: #ddd; } } @media screen and (min-width: 768px) {.tab button:hover { background-color: #ddd; } } /* Create an active/current tablink class */.tab button.active { background-color: #ccc; text-decoration: none; } /* Style the tab content */.tabcontent { display: none; padding: 6px 10px; border: 1px solid #ccc; border-top: none; text-align: center; text-decoration: none; }.wp-table tr:nth-child(odd) { background-color: #fff; }.wp-table tr:nth-child(even) { background-color: #f1f1f1; }.wp-table tr { border-bottom: 1px solid #ddd; }.wp-table th:first-child, .wp-table td:first-child { padding-left: 12px; }.wp-table td, .wp-table th { padding: 4px 4px; display: table-cell; text-align: left; vertical-align: middle; } @media screen and (max-width: 600px) {.wp-table th { font-weight: bold; font-size: 12.6px } } @media screen and (min-width: 768px) {.wp-table th { font-weight: bold; font-size: 16px } } @media screen and (max-width: 600px) {.wp-table { font-size: 12.6px;important: border; 1px solid #ccc: border-collapse; collapse: border-spacing; 0: width; 100%: display; table: } } @media screen and (min-width. 768px) {:wp-table { font-size; 15px:important; border: 1px solid #ccc; border-collapse: collapse; border-spacing: 0; width: 100%; display: table. } } @media screen and (max-width: 600px) {;collapsible { background-color: #777; color: white; padding: 12px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none. font-size; 12:6px. } } @media screen and (min-width: 768px) {;collapsible { background-color: #777; color: white; padding: 14px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none; font-size. 15px, } }.active: :collapsible;hover { background-color: #555; text-decoration. underline: }:collapsible;after { content: '+'; color: white; font-weight: bold; float: right; margin-left. 5px. }:active:collapsible;after { content: "-". } @media screen and (max-width: 600px) {;noncollapsible { background-color: #777; color: white; padding: 12px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none. font-size; 12:6px. } } @media screen and (min-width: 768px) {;noncollapsible { background-color: #777; color: white; padding: 14px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none; font-size. 15px: } };content { padding: 0 10px; display: none; overflow: hidden; background-color. #f1f1f1: };noncollapsecontent { padding: 0 10px; overflow: hidden; background-color: #f1f1f1; } </style>

 <div class="tab"> <button class="tablinks" onclick="openWine(event, 'Wine 1')" id="defaultOpen">Wine 1</button> <button class="tablinks" onclick="openWine(event, 'Wine 2')">Wine 2</button> <button class="tablinks" onclick="openWine(event, 'Wine 3')">Wine 3</button> <button class="tablinks" onclick="openWine(event, 'Wine 4')">Wine 4</button> </div> <div id="Wine 1" class="tabcontent"> <button type="button" class="collapsible">Wine 12</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10060452000</td><td>2000</td><td>4800</td><td>14/4/2021</td></tr> <tr><td>10060452008</td><td>2008</td><td>2670</td><td>14/4/2021</td></tr> <tr><td>10060452009</td><td>2009</td><td>2348</td><td>13/4/2021</td></tr> <tr><td>10060452010</td><td>2010</td><td>3300</td><td>15/4/2021</td></tr> <tr><td>10060452011</td><td>2011</td><td>2590</td><td>14/4/2021</td></tr> <tr><td>10060452012</td><td>2012</td><td>3800</td><td>5/4/2021</td></tr> <tr><td>10060452013</td><td>2013</td><td>2300</td><td>15/4/2021</td></tr> <tr><td>10060452014</td><td>2014</td><td>2320</td><td>14/4/2021</td></tr> <tr><td>10060452015</td><td>2015</td><td>2550</td><td>14/4/2021</td></tr> <tr><td>10060452016</td><td>2016</td><td>2600</td><td>14/4/2021</td></tr> <tr><td>10060452017</td><td>2017</td><td>2760</td><td>12/4/2021</td></tr> <tr><td>10062051998</td><td>1998</td><td>5740</td><td>8/4/2021</td></tr> <tr><td>10062052000</td><td>2000</td><td>9450</td><td>15/4/2021</td></tr> <tr><td>10062052008</td><td>2008</td><td>4332</td><td>14/4/2021</td></tr></table> </div> <button type="button" class="collapsible">Wine 15</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10062052009</td><td>2009</td><td>8500</td><td>14/4/2021</td></tr> <tr><td>10062052010</td><td>2010</td><td>9600</td><td>15/4/2021</td></tr> <tr><td>10062052011</td><td>2011</td><td>4200</td><td>15/4/2021</td></tr> <tr><td>10062052012</td><td>2012</td><td>4000</td><td>15/4/2021</td></tr> <tr><td>10062052013</td><td>2013</td><td>3840</td><td>12/4/2021</td></tr> <tr><td>10062052014</td><td>2014</td><td>4200</td><td>15/4/2021</td></tr> <tr><td>10062052015</td><td>2015</td><td>6280</td><td>12/4/2021</td></tr> <tr><td>10062052016</td><td>2016</td><td>7040</td><td>14/4/2021</td></tr> <tr><td>10062052017</td><td>2017</td><td>4800</td><td>15/4/2021</td></tr></table> </div> <button type="button" class="collapsible">Wine 20</button> <div class="content"> <table class="wp-table"> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> <th>Col 4</th> </tr><tr><td>10071012008</td><td>2008</td><td>900</td><td>13/4/2021</td></tr> <tr><td>10071012009</td><td>2009</td><td>950</td><td>14/4/2021</td></tr> <tr><td>10071012010</td><td>2010</td><td>950</td><td>15/4/2021</td></tr> <tr><td>10071012011</td><td>2011</td><td>810</td><td>5/4/2021</td></tr> <tr><td>10071012012</td><td>2012</td><td>908</td><td>6/4/2021</td></tr> <tr><td>10071012013</td><td>2013</td><td>866</td><td>13/4/2021</td></tr> <tr><td>10071012014</td><td>2014</td><td>840</td><td>13/4/2021</td></tr> <tr><td>10071012015</td><td>2015</td><td>850</td><td>14/4/2021</td></tr> <tr><td>10071012016</td><td>2016</td><td>800</td><td>15/4/2021</td></tr> <tr><td>10071012017</td><td>2017</td><td>760</td><td>15/4/2021</td></tr></table> </div> </div>

Answer 1

如果你只添加.active class，它不会显示内容。 您已经为.active class 编写了 CSS 代码。 您有以下代码

.content {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

在上面的代码中，您使用display:none隐藏了整个部分，但是当您拥有父级的active class 时，您没有重新打开。 所以你必须添加以下样式

.collapsible.active .content {
   display:block;
}

每当您为父级（可折叠）添加.active class 时，上述样式都会检查，子级内容将启用。

我只是给 styles 显示和隐藏。 检查所有剩余的样式问题。

 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 === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } function openWine(evt, wineName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(wineName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();

 /* Style the tab */.tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; text-decoration: none; } /* Style the buttons inside the tab */ @media screen and (max-width: 600px) {.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 12px 12px; transition: 0.3s; font-size: 12.6px; text-decoration: none; } } @media screen and (min-width: 768px) {.tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 15px; text-decoration: none; } } /* Change background color of buttons on hover */ @media screen and (max-width: 600px) {.tab button:hover { background-color: #ddd; } } @media screen and (min-width: 768px) {.tab button:hover { background-color: #ddd; } } /* Create an active/current tablink class */.tab button.active { background-color: #ccc; text-decoration: none; } /* Style the tab content */.tabcontent { display: none; padding: 6px 10px; border: 1px solid #ccc; border-top: none; text-align: center; text-decoration: none; }.wp-table tr:nth-child(odd) { background-color: #fff; }.wp-table tr:nth-child(even) { background-color: #f1f1f1; }.wp-table tr { border-bottom: 1px solid #ddd; }.wp-table th:first-child, .wp-table td:first-child { padding-left: 12px; }.wp-table td, .wp-table th { padding: 4px 4px; display: table-cell; text-align: left; vertical-align: middle; } @media screen and (max-width: 600px) {.wp-table th { font-weight: bold; font-size: 12.6px } } @media screen and (min-width: 768px) {.wp-table th { font-weight: bold; font-size: 16px } } @media screen and (max-width: 600px) {.wp-table { font-size: 12.6px;important: border; 1px solid #ccc: border-collapse; collapse: border-spacing; 0: width; 100%: display; table: } } @media screen and (min-width. 768px) {:wp-table { font-size; 15px:important; border: 1px solid #ccc; border-collapse: collapse; border-spacing: 0; width: 100%; display: table. } } @media screen and (max-width: 600px) {;collapsible { background-color: #777; color: white; padding: 12px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none. font-size; 12:6px. } } @media screen and (min-width: 768px) {;collapsible { background-color: #777; color: white; padding: 14px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none; font-size. 15px, } }.active: :collapsible;hover { background-color: #555; text-decoration. underline: }:collapsible;after { content: '+'; color: white; font-weight: bold; float: right; margin-left. 5px. }:active:collapsible;after { content: "-". } @media screen and (max-width: 600px) {;noncollapsible { background-color: #777; color: white; padding: 12px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none. font-size; 12:6px. } } @media screen and (min-width: 768px) {;noncollapsible { background-color: #777; color: white; padding: 14px; margin-top:1px; width: 100%; border: none; text-align: left; outline: none; font-size. 15px: } };content { padding: 0 10px; display: none; overflow: hidden; background-color. #f1f1f1. }.collapsible:active;content { display.block: };noncollapsecontent { padding: 0 10px; overflow: hidden; background-color: #f1f1f1; }

 <div class="tab"> <button class="tablinks" onclick="openWine(event, 'Wine 1')" id="defaultOpen">Wine 1</button> <button class="tablinks" onclick="openWine(event, 'Wine 2')">Wine 2</button> <button class="tablinks" onclick="openWine(event, 'Wine 3')">Wine 3</button> <button class="tablinks" onclick="openWine(event, 'Wine 4')">Wine 4</button> </div> <div id="Wine 1" class="tabcontent"> <button type="button" class="collapsible">Wine Name/button> <div class="content"> <table class="wp-table"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr><tr><td>10060452000</td><td>2000</td><td>4800</td><td>14/4/2021</td></tr> <tr><td>10060452008</td><td>2008</td><td>2670</td><td>14/4/2021</td></tr> <tr><td>10060452009</td><td>2009</td><td>2348</td><td>13/4/2021</td></tr> <tr><td>10060452010</td><td>2010</td><td>3300</td><td>15/4/2021</td></tr> <tr><td>10060452011</td><td>2011</td><td>2590</td><td>14/4/2021</td></tr> <tr><td>10060452012</td><td>2012</td><td>3800</td><td>5/4/2021</td></tr> <tr><td>10060452013</td><td>2013</td><td>2300</td><td>15/4/2021</td></tr> <tr><td>10060452014</td><td>2014</td><td>2320</td><td>14/4/2021</td></tr> <tr><td>10062052008</td><td>2008</td><td>4332</td><td>14/4/2021</td></tr> </table> </div>