Javascript 使用CSS的多重折叠
我想有一个表，其中一些行包括其他表。我的Javascript 使用CSS的多重折叠,javascript,html,css,xml,xslt,Javascript,Html,Css,Xml,Xslt,我想有一个表，其中一些行包括其他表。我的html文件如下： HTML：在回答后更新 <!DOCTYPE html> <html> <head> </head> <body> <h2>Cell that spans two tables:</h2> <table> <tr> <th>Name:</th>
html<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Cell that spans two tables:</h2>
<table>
<tr>
<th>Name:</th>
<td>Rows including tables</td>
</tr>
<tr>
<th rowspan="4">Telephone:</th>
<td>row1 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td>row3 of first table</td>
</tr>
<tr class="yellow">
<td>
<div class='yellowTable'>
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr class="red">
<td>
<div class='redTable'>
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="changeArrow arrow-up">-</span>
<span class="changeArrow arrow-dn">+</span>
row2 of first table
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable">
<tr>
<td>
20:00
</td>
<td>
hello world first table
</td>
</tr>
<tr>
<td>
21:00
</td>
<td>
hello world second table
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
id和属性，它们应该是唯一的。但问题是，我有数千个这样的表，然后我无法手动执行。我想知道你是否可以让我知道，如果我可以通过CSS或JS系统。我将把它们添加到XSLT文件中。再次感谢你的评论
下面是xslt文件中与要点相关的一些行
<tr class="yellow">
<td>
<div id="yellowTable">
<input name="yelInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
<tr class="red">
<td>
<div id="redTable">
<input name="redInput" type="checkbox" class="toggle"/>
<label>
<span class='expand' id="mouse">
<span class="chnageSymbol expand-Negative">-</span>
<span class="chnageSymbol collapse-Positive">+</span>
<div> row2 of first table </div>
</span>
</label>
<div class="fieldsetContainer">
<table class="secondtable" id="secondtable">
..............................
错误源于您使用的ID应该是唯一的。如果您将toggle改为class而不是id，并将css从#toggle
更新为。toggle
您几乎就拥有了它
如果此时不隐藏input.toggle
元素，您将看到它工作正常
属性的标签“”也需要更新，以便在输入时可以与标签交互。只需在每个切换上使用一个唯一的id，将其放置在标签的属性中，并使用一个类来设置样式和功能。您已经设置了两个id，分别为“切换”和“切换”标签。将它们更改为其他内容：
<input type="checkbox" class="toggle" id="toggle2"/>
要达到预期效果，请使用下面的选项
使用相同的类而不是相同的id进行切换（因为id必须是唯一的）
使用不透明度：0而不是显示：无（因为它在DOM上不适用于事件）
HTML:
非常感谢您的回答。我想知道你是否能让我知道如何在“切换”后系统地给出带有计数器或数字的id。因为我的文件非常大，我想使用XSLT文件来创建上面的html文件。提前谢谢！生成html的代码（或部分代码）看起来如何？请查看更新版本。我已经更新了。谢谢在为输入和标签创建html和属性“toggle”id的代码中，是否也添加了迭代器，比如i（作为for循环中的索引）。类似这样：for（让i=1；ifunction assignIdAndForAttribute()
{
var redTable= document.getElementById("redTable");
var redInputTag = redTable.getElementsByTagName("input");
var redLabelTag = redTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableError.length; i++) {
redInputTag [i].setAttribute("id", 'toggleRed' + i);
redLabelTag [i].setAttribute("for", 'toggleRed' + i);
}
//]]>
var yellowTable = document.getElementById("detailedTable");
var yellowInputTag = yellowTable.getElementsByTagName("input");
var yellowLabelTag = yellowTable.getElementsByTagName("label");
//<![CDATA[
for (var i = 0; i < tableWarning.length; i++) {
yellowInputTag [i].setAttribute("id", 'toggleyellow' + i);
yellowLabelTag [i].setAttribute("for", 'toggleyellow' + i);
}
//]]>
}
<input type="checkbox" class="toggle" id="toggle2"/>
<input type="checkbox" class="toggle" />
.toggle {
opacity:0
}
.toggle:checked~.fieldsetContainer {
height: auto;
}
.toggle:checked~label .arrow-dn {
display: none;
}
.toggle:checked~label .arrow-up {
display: inline-block;
}