我需要展开和折叠表格行
我从此站点上已有的答案中获得了以下代码.使用以下JQuery代码，默认情况下折叠表格行，然后单击标题ID"以展开表格.但是，如果再次单击标题ID，则行将不会折叠.我需要在此代码中添加一些内容以使其达到目的.如果可能的话，我还想添加一个用户可以单击的+和-图标，而不是标题ID本身.有人可以帮忙吗?
I got the following code from an answer already on this site. With the following JQuery code the table rows are collapsed by default and then by clicking on the 'heading id' I can expand the table. However, if I click on the heading id again the rows will not collapse. I need to add something to this code to make it do that. If possible I would also like to add a + and a - icon that the user can click on instead of the heading id itself. Can anyone help?
<!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>`
您没有说您的最终目标是什么，所以我将使用您拥有的示例(这是一个有两列的表，其中第一行的样式为标题.
You don't say what you ultimate goal is, so I will answer your question using the example you have (which is a table with two columns, where the first row is styled as a heading).
向每行添加一个ID很繁琐.使用DOM遍历，您将获得更多收益.因此，就您而言，您可以执行以下操作:
It's tedious to add an id to each and every row. You'll get more bang for your buck using DOM traversal. So, in your case, you can do:
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添加+或-.
And then, as a simple solution, you can use CSS to add a + or -.
CSS
.hCollapsed::before {
content: "+ ";
}
.hExpanded::before {
content: "- ";
}
#heading {
cursor: pointer;
}