主页 / 问题 / 1207573
Accepted
Stop-TussiN
Asked:2021-11-21 03:28:18 +0000 UTC2021-11-21 03:28:18 +0000 UTC

通过“显示更多”按钮加载内容

  • 772

有这样一个新闻列表：

<ul class="news">
    <li>Новость 1</li>
    <li>Новость 2</li>
    <li>Новость 3</li>
    <li style="display:none;">Новость 4</li>
    <li style="display:none;">Новость 5</li>
    <li style="display:none;">Новость 6</li>
    <li style="display:none;">Новость 7</li>
    <li style="display:none;">Новость 8</li>
</ul>
<a href="">Показать еще</a>

如何在“显示更多”按钮上进行操作，以便显示接下来的 3 条隐藏新闻？当您再次按下按钮时，将显示剩余的 2 条隐藏消息。

我有一个从 mysql 数据库中检索新闻的 javascript 脚本。但是只需要这样的输出方式，不需要连接数据库。

javascript

2 个回答

  1. Best Answer

    function showMore() {
  var hidden = document.querySelectorAll('.news .hidden');
  for (let i = 0; i < 3 && i < hidden.length; i++) {
    hidden[i].classList.remove('hidden');
  }
}
    .hidden {
  display:none;
}
    <ul class="news">
    <li>Новость 1</li>
    <li>Новость 2</li>
    <li>Новость 3</li>
    <li class="hidden">Новость 4</li>
    <li class="hidden">Новость 5</li>
    <li class="hidden">Новость 6</li>
    <li class="hidden">Новость 7</li>
    <li class="hidden">Новость 8</li>
</ul>
<a href="#" onclick="showMore()">Показать еще</a>

    • 2

  2. 为什么选择 JavaScript？一切都是使用 HTML 实现的。在示例中，即使是 CSS 也只是用于装饰。没有 CSS 也能正常工作。

    details[open]>summary {
  display: none;
}

summary {
  display: block;
  cursor: pointer;
  padding: 10px;
  font-family: "Space Mono", monospace;
  transition: .3s;
  border: 1px solid;
  user-select: none;
  text-align: center;
}
    <ul>
  <li>Новость 1</li>
  <li>Новость 2</li>
  <details>
    <summary>Показать еще</summary>
    <li>Новость 3</li>
    <li>Новость 4</li>
    <li>Новость 5</li>
    <details>
      <summary>Показать еще</summary>
      <li>Новость 6</li>
      <li>Новость 7</li>
      <li>Новость 8</li>
      <details>
        <summary>Показать еще</summary>
        <li>Новость 9</li>
        <li>Новость 10</li>
        <li>Новость 11</li>
        <details>
          <summary>Показать еще</summary>
          <li>Новость 12</li>
          <li>Новость 13</li>
          <li>Новость 14</li>
        </details>
      </details>
    </details>
  </details>
</ul>

    • 2

相关问题