我需要展开和折叠 table 行

Question

我从本网站上已有的答案中获得了以下代码。使用以下 JQuery 代码，table 行默认折叠，然后通过单击 'heading id' 我可以展开 table。但是，如果我再次单击标题 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>`

Answer 1

你没有说你的最终目标是什么，所以我会用你的例子来回答你的问题（这是一个 table 有两列，第一行的样式是标题） .

为每一行添加一个 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;
}

Fiddle 演示：https://jsfiddle.net/zephyr_hex/cwtd2g18/

我需要展开和折叠 table 行

I need to expand and collapse a table row

jquery

collapsable

expandable