Question

仅使用列表项时，我可以使显示更多显示更少按钮起作用。现在，我已经将我的列表放入表中，代码无法正常工作。它仅隐藏/显示第一列中的文本。 “显示更多”按钮应显示两列的前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>

Answer 1

如上面的评论所述，那里有一些非常复杂的HTML ...您不能在这样的列表中包含随机的其他元素，也不能在列表的末尾加上<span> ，表格单元格和其他各种形式。这不是有效的HTML。与其显示/隐藏整个块，不如考虑为应该最初隐藏的元素提供一个类，然后在需要显示它们时将其删除。演示：

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>

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

1 个答案: