在html中展开折叠表不起作用

Question

我正在使用下面的代码来扩展和折叠表的行。 我有一张有四行的桌子。 第一行有两列。 第二行有一列。 第三行两列。 第四行两列。 我希望用户首次加载页面时出现前两行。 然后，当他点击第二行并说“显示所有过滤器”时，我希望表格扩展，然后再次轻按第二行以折叠。 如何实现此功能？ 请检查我的代码。 第一次尝试使用javascript做到这一点，任何帮助表示赞赏...

<script type="text/javascript">
$('.header').click(function(){

$(this).nextUntil('tr.header').slideToggle(1000);
});
</script>
    <table  style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY   font-family:"Courier New", Courier, monospace; font-size:80%>
    <tr>
    <td  style="font-weight:bold" style="padding: 10px;" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Brand</td>


    <td   style="padding: 10px; color:black" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
<a  style="color:black" href="/category/"  >ALCATEL</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:black" href="/category/"  >APPLE</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a style="color:black" href="/category/"  >ARCHOS</a>&nbsp;&nbsp;&nbsp;&nbsp;
</td>
</tr>

<tr align="center" class="header" >
     <td colspan="2" style="padding: 10px">SHOW ALL FILTERS</td>
 </tr>
<tr>
    <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 1</td>
    <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
        <a href="/category/"  >1-50 €     50-100 €     100-200 €     200-400 €     400-800 €</a>&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
</tr>
</tr>
<tr>
    <td  style="font-weight:bold" style="padding: 10px" width="40%"  border="1" bordercolor=LIGHTGREY align="center">Price Range 2</td>
    <td  style="padding: 10px" width="100%"  border="1" bordercolor=LIGHTGREY  align="center">
        <a href="/category/"  >1-10 €     10-20 €     30-40 €     40-50 €  </a>&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
</tr>
</table>

Answer 1

实际上，这样做更容易。 您只需要创建一个将隐藏最后两行的类。 然后，您添加一个JavaScript，在单击第三行时，它将在两个元素上添加或删除该类。

PS我还在js中添加了一个脚本，该脚本更改了第三行的innerHTML。 从“显示所有过滤器”到“隐藏所有过滤器”，反之亦然。

 function toggleDisplay(){ var last2Rows = document.getElementsByClassName('toggle'); var clickableTd = document.getElementById('clickable-td'); for (var i = 0; i < last2Rows.length; i++) { if (last2Rows[i].classList.contains("hidden")) { last2Rows[i].classList.remove("hidden"); clickableTd.innerHTML = "HIDE ALL FILTERS"; } else{ last2Rows[i].classList.add("hidden"); clickableTd.innerHTML = "SHOW ALL FILTERS"; } } } 

 .hidden{ display: none; } 

 <table style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY font-family:"Courier New", Courier, monospace; font-size:80%> <tr> <td style="font-weight:bold" style="padding: 10px;" width="40%" border="1" bordercolor=LIGHTGREY align="center">Brand</td> <td style="padding: 10px; color:black" width="100%" border="1" bordercolor=LIGHTGREY align="center"> <a style="color:black" href="/category/" >ALCATEL</a>&nbsp;&nbsp;&nbsp;&nbsp; <a style="color:black" href="/category/" >APPLE</a>&nbsp;&nbsp;&nbsp;&nbsp; <a style="color:black" href="/category/" >ARCHOS</a>&nbsp;&nbsp;&nbsp;&nbsp; </td> </tr> <tr align="center" class="header" id="display-toggler" onclick = "toggleDisplay()"> <td colspan="2" style="padding: 10px" id="clickable-td">SHOW ALL FILTERS</td> </tr> <tr class="toggle hidden"> <td style="font-weight:bold" style="padding: 10px" width="40%" border="1" bordercolor=LIGHTGREY align="center">Price Range 1</td> <td style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY align="center"> <a href="/category/" >1-50 € 50-100 € 100-200 € 200-400 € 400-800 €</a>&nbsp;&nbsp;&nbsp;&nbsp; </td> </tr> <tr class="toggle hidden"> <td style="font-weight:bold" style="padding: 10px" width="40%" border="1" bordercolor=LIGHTGREY align="center">Price Range 2</td> <td style="padding: 10px" width="100%" border="1" bordercolor=LIGHTGREY align="center"> <a href="/category/" >1-10 € 10-20 € 30-40 € 40-50 € </a>&nbsp;&nbsp;&nbsp;&nbsp; </td> </tr> </table>