Javascript 使用“显示更多”按钮隐藏列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10944304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding list items with a "show more" button
提问by Lolmewn
I have an issue. I am getting data from a MySQL database, and make a list of it. That's all good, and works fine, but the list is now over 100 items long if I don't limit it. I've tried Googling how to shorten list, and found some things with jQuery and JavaScript, but that didn't work too well.
我有一个问题。我正在从 MySQL 数据库获取数据，并列出它。这一切都很好，而且工作正常，但如果我不限制它，列表现在有 100 多个项目。我试过谷歌搜索如何缩短列表，并找到了一些使用 jQuery 和 JavaScript 的东西，但效果不佳。
What I'm looking for is a way to make the list limit itself on 10 items, with a [More] button under it. When pressed, the next 10 items show, and when pressed again, 10 more etc.
我正在寻找的是一种将列表限制在 10 个项目上的方法，在它下面有一个 [更多] 按钮。按下时，显示接下来的 10 个项目，再次按下时，显示另外 10 个项目，以此类推。
I have my list in normal <li>and <ul>bits.
If there's any more information needed, please ask me. This is the webpage it's about: http://lolmewn.nl/stats/
我有正常<li>和<ul>位的列表。如果需要更多信息，请询问我。这是它的网页：http: //lolmewn.nl/stats/
A bit of my PHP code:
我的一些 PHP 代码：
echo "<li><a href=\"?player=" . $row['player'] . "\">" . $row['player'] .
"</a></li>\n";
回答by KiiroSora09
Maybe you can try this. In this example I used 2 items instead of 10. I used css to hide all li elements starting from the 3rd li element inside the ul. I used jQuery to reveal additional 2 lis every time show more is clicked.
也许你可以试试这个。在这个例子中，我使用了 2 个项目而不是 10 个。我使用 css 来隐藏从 ul 中的第 3 个 li 元素开始的所有 li 元素。每次单击“显示更多”时，我都使用 jQuery 显示额外的 2 个 lis。
Hope this helps
希望这可以帮助
Updated Link Again...
再次更新链接...
EDIT
编辑
$(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>回答by gopi1410
One method is to use ajax to load the list items & restrict them to 10 items using mysql limit.
一种方法是使用 ajax 加载列表项并使用mysql limit将它们限制为 10 个项。
Otherwise, if you load all at once, you can do the following: (write the code yourself)
否则，如果一次性全部加载，则可以执行以下操作：（自己编写代码）
Load all of them in a
uland make the display of all none.Then using
jquery eq selectordisplay the first 10lielements.on clicking more, just toggle those
liwhich you want to display.
将它们全部加载到 a 中
ul并显示所有无。然后使用
jquery eq selector显示前 10 个li元素。单击更多，只需切换
li要显示的那些。
回答by mck89
Simple solution in pure javascript:
纯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);
回答by Tepken Vannkorn
Have you ever try jquery datatableyet?
你有没有尝试过jquery 数据表？
回答by masi
If you want this is pure javascript I made a example on jsfiddle
如果你想要这是纯 javascript 我在 jsfiddle 上做了一个例子
Javascript
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
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
CSS
.shown{
display:block;
}
.hidden{
display:none;
}
回答by Scott Stevens
If you want to limit the number of results from the database, add LIMIT 10(or any number) to the MySQL query.
如果要限制来自数据库的结果数量，请添加LIMIT 10（或任意数量）到 MySQL 查询中。
If you want to actually hide the lists, but leave them available, you will need CSS to initially hide them, and Javascript/Jquery to unhide them. (CSS3 might let you unhide them without Javascript/Jquery, but it isn't fully supported everywhere yet).
如果你想真正隐藏列表，但让它们可用，你将需要 CSS 来最初隐藏它们，以及 Javascript/Jquery 来取消隐藏它们。（CSS3 可能会让您在没有 Javascript/Jquery 的情况下取消隐藏它们，但目前还没有完全支持它）。
Assuming all the list items have the same CSS classthen a javascript loop like the following may work:
假设所有列表项都具有相同的 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;
}
}
}
In the CSS, all you need to add is .tagnamehere {display:none;}
在 CSS 中，您只需要添加 .tagnamehere {display:none;}
Feel free to substitute with your own tags.
随意替换为您自己的标签。
