使用"显示更多"按钮隐藏列表项

Question

我有一个问题.我从MySQL数据库中获取数据,并列出它.这一切都很好,并且工作正常,但如果我不限制它,那么列表现在已超过100项.我已经尝试使用Google搜索如何缩短列表,并使用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

也许你可以试试这个.在这个例子中,我使用了2个项而不是10个.我使用css来隐藏从ul里面的第3个li元素开始的所有li元素.每次显示更多点击时,我使用jQuery显示额外的2 lis.

希望这可以帮助

再次更新链接...

编辑

$(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>