显示更多按钮不适用于我的桌子

Question

I was able to get the show more show less button to work when only using list items.仅使用列表项时，我能够使显示更多显示更少按钮起作用。 now that i have my list into tables the code doesn't work.现在我将列表放入表格中，代码不起作用。 it only hides/shows text in the first column.它只隐藏/显示第一列中的文本。 The Show more button should show the first 10 bullets of both columns then display the button under.显示更多按钮应显示两列的前 10 个项目符号，然后在下方显示按钮。 when you click the button it also makes text jump positions.当您单击按钮时，它也会使文本跳转位置。

 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>US 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>

Answer 1

As the comment above says, there's some pretty screwy HTML there...you can't have random other elements inside a list like that, and you can't have a <span> wrapping around the ends of lists, table cells and all sorts.正如上面的评论所说，那里有一些非常古怪的 HTML ......你不能在这样的列表中随机包含其他元素，你不能有一个<span>环绕列表，表格单元格和所有的末端排序。 It's not valid HTML.它是无效的 HTML。 Instead of showing / hiding whole blocks like that, think instead in terms of giving a class to the elements which should be initially hidden, and then removing that class when they need to be shown.不要像那样显示/隐藏整个块，而是考虑将 class 分配给最初应该隐藏的元素，然后在需要显示时删除 class。 Demo:演示：

 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">US 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>

显示更多按钮不适用于我的桌子

问题描述

1 个解决方案

解决方案1
0 2019-09-20 23:12:37

显示更多按钮不适用于我的桌子

问题描述

1 个解决方案

解决方案1 0 2019-09-20 23:12:37

解决方案1
0 2019-09-20 23:12:37