Кнопка Показать больше не работает для моего стола - PullRequest
Новая
       1

Кнопка Показать больше не работает для моего стола

0 голосов
/ 20 сентября 2019

Мне удалось заставить работать кнопку «показать больше, показать меньше» при использовании только элементов списка.теперь, когда у меня есть список таблиц, код не работает.он только скрывает / показывает текст в первом столбце.Кнопка «Показать больше» должна отображать первые 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>

1 Ответ

0 голосов
/ 21 сентября 2019

Как сказано в комментарии выше, там есть какой-то довольно странный 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...