当仅使用列表项时，我能够让显示更多显示更少按钮工作。现在我已经将列表放入表中，代码不起作用。它只隐藏/显示第一列中的文本。 显示更多按钮应显示两列的前 10 个元素符号，然后显示下面的按钮。当您单击该按钮时，它还会使文本跳转位置。
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}#more {
display: none;
}
.columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
position: relative;
}
.hed {
font-size: 16px;
font-weight: 800;
list-style: none;
margin: 15px 0px 5px;
}<body>
<table width="100%" border="0">
<tbody>
<tr>
<td>
<h4>Elementary</h4>
<ul>
<li>Maps: Primary: ELS</li>
<li>Maps: Primary: Readiness</li>
<li>Maps: Primary: Outline World Map</li>
<li>Maps: Intermediate: Physical</li>
<li>Maps: Intermediate: Political</li>
<li>Maps: Intermediate: Continents and Oceans Thematic</li>
<li>Maps: Intermediate: Wealth of Countries Thematic</li>
<li>Maps: Intermediate: Precipitation Thematic</li>
<li>Maps: Intermediate: Temperature Thematic</li>
<li>Maps: Intermediate: Time Zones Thematic</li>
<span id="dots"></span><span id="more">
<li>Maps: Intermediate: Land Use Thematic</li>
<li>Maps: Intermediate: Population Thematic</li>
<li>Maps: Intermediate: Outline World Map</li>
<li>State Map</li>
</ul>
</td>
<td>
<h4>Secondary</h4>
<ul>
<li>Maps: Intermediate: Physical</li>
<li>Maps: Intermediate: Political</li>
<li>Maps: Intermediate: Continents and Oceans Thematic</li>
<li>Maps: Intermediate: Wealth of Countries Thematic</li>
<li>Maps: Intermediate: Precipitation Thematic</li>
<li>Maps: Intermediate: Temperature Thematic</li>
<li>Maps: Intermediate: Time Zones Thematic</li>
<li>Maps: Intermediate: Land Use Thematic</li>
<li>Maps: Intermediate: Population Thematic</li>
<li>Maps: Intermediate: Outline World Map</li>
<li>Maps: Secondary: Land Use Thematic</li>
<li>Maps: Secondary: Population Thematic</li>
</ul>
</td>
</tr>
<tr>
<td>
<h4>U.S. History</h4>
<li>Native Americans</li>
<li>Spanish Explorers</li>
<li>Explorers</li>
</td>
</tr>
</span>
</tbody>
</table>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>最佳答案
正如上面的评论所说，那里有一些相当古怪的 HTML...你不能在这样的列表中随机添加其他元素，也不能有 <span>。环绕列表、表格单元格和各种类型的末尾。它不是有效的 HTML。不要像那样显示/隐藏整个 block ，而是考虑为最初应该隐藏的元素提供一个类，然后在需要显示它们时删除该类。演示:
function myFunction() {
var dots = document.getElementById("dots");
var btnText = document.getElementById("myBtn");
var more = document.querySelectorAll(".more");
if (dots.style.display === "none") {
more.forEach(el => el.classList.add("hidden"));
dots.style.display = "inline";
btnText.innerHTML = "Read more";
} else {
more.forEach(el => el.classList.remove("hidden"));
dots.style.display = "none";
btnText.innerHTML = "Read less";
}
}#more {
display: none;
}
.columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
position: relative;
}
.hed {
font-size: 16px;
font-weight: 800;
list-style: none;
margin: 15px 0px 5px;
}
.hidden {
display: none;
}<body>
<table width="100%" border="0">
<tbody>
<tr>
<td>
<h4>Elementary</h4>
<ul>
<li>Maps: Primary: ELS</li>
<li>Maps: Primary: Readiness</li>
<li>Maps: Primary: Outline World Map</li>
<li>Maps: Intermediate: Physical</li>
<li>Maps: Intermediate: Political</li>
<li>Maps: Intermediate: Continents and Oceans Thematic</li>
<li>Maps: Intermediate: Wealth of Countries Thematic</li>
<li>Maps: Intermediate: Precipitation Thematic</li>
<li>Maps: Intermediate: Temperature Thematic</li>
<li>Maps: Intermediate: Time Zones Thematic</li>
<li><span id="dots">...</span></li>
<li class="more hidden">Maps: Intermediate: Land Use Thematic</li>
<li class="more hidden">Maps: Intermediate: Population Thematic</li>
<li class="more hidden">Maps: Intermediate: Outline World Map</li>
<li class="more hidden">State Map</li>
</ul>
</td>
<td>
<h4 class="more hidden">Secondary</h4>
<ul class="more hidden">
<li>Maps: Intermediate: Physical</li>
<li>Maps: Intermediate: Political</li>
<li>Maps: Intermediate: Continents and Oceans Thematic</li>
<li>Maps: Intermediate: Wealth of Countries Thematic</li>
<li>Maps: Intermediate: Precipitation Thematic</li>
<li>Maps: Intermediate: Temperature Thematic</li>
<li>Maps: Intermediate: Time Zones Thematic</li>
<li>Maps: Intermediate: Land Use Thematic</li>
<li>Maps: Intermediate: Population Thematic</li>
<li>Maps: Intermediate: Outline World Map</li>
<li>Maps: Secondary: Land Use Thematic</li>
<li>Maps: Secondary: Population Thematic</li>
</ul>
</td>
</tr>
<tr>
<td>
<h4 class="more hidden">U.S. History</h4>
<ul class="more hidden">
<li>Native Americans</li>
<li>Spanish Explorers</li>
<li>Explorers</li>
</ul>
</td>
</tr>
</tbody>
</table>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>关于javascript - 显示更多按钮不适用于我的 table ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58034979/