gpt4 book ai didi

javascript - html 中的展开折叠表不起作用

转载 作者:行者123 更新时间:2023-12-03 00:31:20 26 4
gpt4 key购买 nike

我正在使用下面的代码来展开和折叠表的行。我有一张 4 行的 table 。第一行有两列。第二行有一列。第三行两列。第四行两列。我希望当用户第一次加载页面时出现前两行。然后,当他点击第二行说“显示所有过滤器”时,我希望表格展开,然后再次点击第二行时折叠。这个功能如何实现呢?请检查我的代码。第一次尝试使用 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>

最佳答案

实际上有一个更简单的方法可以做到这一点。您只需创建一个隐藏最后两行的类。然后添加一个 JavaScript,单击第三行后将在两个元素上添加或删除该类。

P.S. 我还在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>

关于javascript - html 中的展开折叠表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53861165/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com