Question

我从本网站上的答案中得到了以下代码。使用以下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>`

Answer 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/

我需要展开和折叠表格行

1 个答案: