javascript - 使用 "show more"按钮隐藏列表项

Question

我有一个问题。我正在从 MySQL 数据库获取数据，并列出它。这一切都很好，而且工作正常，但如果我不限制的话，这个列表现在有超过 100 个项目。我试过谷歌搜索如何缩短列表，并用 jQuery 和 JavaScript 找到了一些东西，但效果不太好。

我正在寻找一种方法，使列表本身限制在 10 个项目上，并在其下方有一个 [更多] 按钮。按下时，将显示接下来的 10 个项目，再次按下时，将显示另外 10 个，依此类推。

我的列表正常 <li>和 <ul>位。如果需要更多信息，请问我。这是关于它的网页:http://lolmewn.nl/stats/

我的一些 PHP 代码:

echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] . 
     "</a></li>\n";

Answer 1

也许你可以试试this .在此示例中，我使用了 2 个项目而不是 10 个。我使用 css 隐藏了 ul 中从第 3 个 li 元素开始的所有 li 元素。每次单击“显示更多”时，我都使用 jQuery 显示额外的 2 个列表。

希望对你有帮助

再次更新链接...

编辑

$(function () {
    $('span').click(function () {
        $('#datalist li:hidden').slice(0, 2).show();
        if ($('#datalist li').length == $('#datalist li:visible').length) {
            $('span ').hide();
        }
    });
});

ul li:nth-child(n+3) {
    display:none;
}
ul li {
    border: 1px solid #aaa;
}
span {
    cursor: pointer;
    color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="datalist">
  <li>dataset1</li>
  <li>dataset1</li>
  <li>dataset2</li>
  <li>dataset2</li>
  <li>dataset3</li>
  <li>dataset3</li>
  <li>dataset4</li>
  <li>dataset4</li>
  <li>dataset5</li>
  <li>dataset5</li>
</ul>
<span>readmore</span>