我需要展开和折叠表格行答案

【问题标题】：I need to expand and collapse a table row我需要展开和折叠表格行
【发布时间】：2018-06-04 15:26:12
【问题描述】：

我从这个网站上已有的答案中得到了以下代码。使用以下 JQuery 代码，表格行默认折叠，然后通过单击“标题 id”我可以展开表格。但是，如果我再次单击标题 ID，则行不会折叠。我需要在这段代码中添加一些东西来让它做到这一点。如果可能的话，我还想添加用户可以单击的 + 和 - 图标，而不是标题 ID 本身。有人可以帮忙吗？

<!DOCTYPE html>

    <head>
        <title>Master Vocab List</title>

            <script type="text/javascript" src="jquery.js">  
            </script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#collapse").hide();
                    $("#collapse1").hide();
                    $("#collapse2").hide();
                    $("#collapse3").hide();
                    $("#collapse4").hide();
                    $("#collapse5").hide();
                    $("#collapse6").hide();
                    $("#collapse7").hide();
                    $("#collapse8").hide();

                });


                $("#heading").click(function(){                 
                    $("#collapse").show();
                    $("#collapse1").show();
                    $("#collapse2").show();
                    $("#collapse3").show();
                    $("#collapse4").show();
                    $("#collapse5").show();
                    $("#collapse6").show();
                    $("#collapse7").show();
                    $("#collapse8").show();



                });
            </script>

    <table>
        <tr>
            <td id="heading"  colspan = "2"><b>Connectors and  
            Transitions</b></td>
        </tr>
        <tr id="collapse">
            <td>primero</td>
            <td>first</td>
       </tr>
       <tr id="collapse1">
           <td>después</td>
           <td>afterwards</td>
       </tr>
       <tr id="collapse2">
           <td>pero</td>
           <td>but</td>
       </tr>
       <tr id="collapse3">
           <td>y</td>
           <td>and</td>
       </tr>
       <tr id="collapse4">
           <td>luego</td>
           <td>afterwards</td>
       </tr>
       <tr id="collapse5">
           <td>antes</td>
           <td>beforehand</td>
       </tr>
       <tr id="collapse6">
           <td>finalmente</td>
           <td>finally</td>
       </tr>
       <tr id="collapse7">
           <td>por ejemplo</td>
           <td>for example</td>
      </tr>
      <tr id="collapse8">
           <td>mientras</td>
           <td>while</td>
      </tr>
  </table>`

【问题讨论】：

您可以添加图像或字体真棒图标并将 Id 属性从标题移动到这个新元素以完成 +。然后不要在代码中调用 .show do .toggle
感谢您提供的信息。效果很好！

标签： jquery expandable collapsable

【解决方案1】：

你没有说你的最终目标是什么，所以我会用你的例子来回答你的问题（这是一个有两列的表格，第一行被设置为标题）。

为每一行添加一个 id 很繁琐。使用DOM 遍历，您将获得更多收益。所以，在你的情况下，你可以这样做：

jQuery

$(document).ready(function() {
  //find all rows after the first row and hide them
  $('table').find('tr:gt(0)').hide();
  //add a class to track expanded / collapsed (for CSS styling)
  $('#heading').addClass('hCollapsed');


  $("#heading").click(function() {
    //#heading is a cell, so go up to the parent, which is the first tr.  Toggle the hide/show status of those rows.
    $(this).parent().siblings().toggle();
    //then adjust the classes accordingly (for CSS styling)
    if ($(this).hasClass('hCollapsed')) {
      $(this).removeClass('hCollapsed').addClass('hExpanded');
    } else {
      $(this).removeClass('hExpanded').addClass('hCollapsed');
    }

  });
});

然后，作为一个简单的解决方案，您可以使用 CSS 添加 + 或 -。

CSS

.hCollapsed::before {
  content: "+ ";
}

.hExpanded::before {
  content: "- ";
}

#heading {
  cursor: pointer;
}

小提琴演示：https://jsfiddle.net/zephyr_hex/cwtd2g18/

【讨论】：

这太棒了！太感谢了！我基本上只是有一个很长的词汇列表，分组在不同的标题下，所以我将把这段代码应用到多个标题上，并让它们都可以折叠，以便更清晰地展示。再次感谢。