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>

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

1 个答案: