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

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 元素。每次点击 show more 时，我都使用 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>

Answer 2

一种方法是使用 ajax 加载列表项并使用 mysql limit 将它们限制为 10 项。

否则，如果你一次加载所有，你可以这样做：（自己写代码）

• 将它们全部加载到ul 中并全部显示为无。

• 然后使用jquery eq selector显示前10个li元素。

• 点击更多，只需切换您要显示的li。

Answer 3

你试过jquery datatable吗？

Answer 4

纯javascript中的简单解决方案：

var ul = document.getElementsByTagName("ul")[0], //Your <ul>
    readmore = document.createElement("li"),
    lisColl = ul.getElementsByTagName("li"),
    len = lisColl.length,
    lis = [],
    pos = 0;
readmore.textContent = "Read more";
for (var i = 0; i < len; i++) {
    lisColl[i].style.display = "none";
    lis.push(lisColl[i]);
}
readmore.onclick = function () {
    if (this.parentNode) {
        this.parentNode.removeChild(this);
    }
    for (var c = 0; pos < len; pos++) {
        if ((c++) === 10) {
            ul.insertBefore(this, lis[pos + 1]);
            break;
        }
        lis[pos].style.display = "";
    }
}
readmore.onclick.call(readmore);

Answer 5

如果你想要这是纯 javascript 我做了一个例子 on jsfiddle

Javascript

function showMore() {

    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)')).slice(0, 3);

  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'shown';
  }
  switchButtons();
}

function showLess() {
    var listData = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)')).slice(-3);
  for (var i=0; i < listData.length; i++)
  {
    listData[i].className  = 'hidden';
  }
  switchButtons();
}

function switchButtons() {
    var hiddenElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.shown)'));
  if(hiddenElements.length == 0)
  {
    document.getElementById('moreButton').style.display = 'none';
  }
  else
  {
    document.getElementById('moreButton').style.display = 'block';
  }

  var shownElements = Array.prototype.slice.call(document.querySelectorAll('#dataList li:not(.hidden)'));
  if(shownElements.length == 0)
  {
    document.getElementById('lessButton').style.display = 'none';
  }
  else
  {
    document.getElementById('lessButton').style.display = 'block';
  }
}

onload= function(){
    showMore();
}

HTML

<ul id="dataList">
    <li class="hidden">One</li>
    <li class="hidden">Two</li>
    <li class="hidden">Three</li>
    <li class="hidden">Four</li>
    <li class="hidden">Five</li>
    <li class="hidden">Six</li>
    <li class="hidden">Seven</li>
    <li class="hidden">Eight</li>
    <li class="hidden">Nine</li>
    <li class="hidden">Ten</li>
    <li class="hidden">Eleven</li>
</ul>
<input id="moreButton" type="button" value="More" onclick="showMore()"/>
<input id="lessButton" type="button" value="Less" onclick="showLess()"/>

CSS

.shown{
  display:block;
}
.hidden{
  display:none;
}

Answer 6

如果您想限制来自数据库的结果数量，请将LIMIT 10（或任何数字）添加到 MySQL 查询中。

如果您想真正隐藏列表，但让它们保持可用，您将需要 CSS 来隐藏它们，并使用 Javascript/Jquery 来取消隐藏它们。 （CSS3 可以让你在没有 Javascript/Jquery 的情况下取消隐藏它们，但它还没有在所有地方都得到完全支持）。

假设所有列表项都具有相同的 CSS class，那么类似以下的 javascript 循环可能会起作用：

function unhide(number) {
    var items = document.getElementsByClassName('tagnamehere');
    var shown=0;
    for (var i=0; shown<number && i<items.length; i++) {
        if (items[i].style.display=="" || items[i].style.display=="none") {
            items[i].style.display="list-item";
    shown+=1;
        }
    }
}

在CSS中，你只需要添加.tagnamehere {display:none;}

请随意替换为您自己的标签。