我有一个包含20-30个事件之间的列表元素。我只想展示其中的5个,并有一个«更多»链接我可以点击观看接下来的五个。如果附加五个下一个事件并不重要。
找不到实际执行此操作的jQuery脚本,或者我只是盲目?我不想使用旋转木马插件或类似的东西。
答案 0 :(得分:6)
嗯,幸运的是,对于我们为食品和名望编写代码的程序员而言,并非所有可以想象的功能都已编写为插件:)
但这很容易:
var from = 0, step = 5;
function showNext(list) {
list
.find('li').hide().end()
.find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
.show();
from += step;
}
function showPrevious(list) {
from -= step;
list
.find('li').hide().end()
.find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
.show();
}
// show initial set
showNext($('ul'));
// clicking on the 'more' link:
$('#more').click(function(e) {
e.preventDefault();
showNext($('ul'));
});
当然这可以更好地提取到类似插件的功能中,但我会将其作为读者的练习;)
答案 1 :(得分:6)
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("ul.more").each(function() {
$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
$("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});
$("li.more a").live("click", function() {
var li = $(this).parents("li:first");
li.parent().children().show();
li.remove();
return false;
});
});
</script>
</script
</body>
</html>
基本上这是做什么的:
修改:修正了一些小错误。以上是一个完全有效的示例(只需确保jquery链接正确)。
答案 2 :(得分:3)
您希望隐藏列表中的每个元素(CSS:display:none)。然后让你的更多链接进入list元素。
$(document).ready(function()
{
$("a#myMoreLink").click(function()
{
var items = $("ul#myList > li:hidden");
if(items.length > 0)
items.slice(0, 5).show();
else
$(this).html("No more");
return false;
});
$("a#myMoreLink").click();
});
使用HTML:
<ul id="myList">
<li style="display: none"></li>
<li style="display: none"></li>
</ul>
<a href="http://" id="myMoreLink">More</a>
这样的事情。 $( “A#myMoreLink”)点击()。被调用以在加载页面时显示最初的5个项目。
答案 3 :(得分:2)
这有效但你肯定要调整一些:)
HTML:
<div style="width:200px;border:3px groove blue;">
<ul id="list">
<li>Thai</li>
<li>Turkish</li>
<li>Portuguese</li>
<li>American English</li>
<li>Arabic</li>
<li>Canadian French</li>
<li>Chinese Simplified</li>
<li>Chinese Traditional</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>English</li>
<li>Finnish</li>
<li>French</li>
<li>German</li>
<li>Greek</li>
<li>Hebrew</li>
<li>Hungarian</li>
<li>Italian</li>
<li>Japanese</li>
<li>Norweigan</li>
<li>Polish</li>
<li>Russian</li>
<li>Spanish</li>
</ul>
<a href="#" id="lnkMore">More</a>
</div>
的javascript:
<script type="text/javascript">
var len = 0;
var curStart = 0;
var count = 5;
var items=new Array();
function BackupList() {
var lst = $("ul#list");
len= $("ul#list li").length;
if (len <= count)
return;
$("ul#list li").each(function() {
items.push($(this));
$(this).remove();
});
var html="";
for (curStart; curStart < count && curStart < len; curStart++) {
html += "<li>" + $(items[curStart]).html() + "</li>";
}
$(html).appendTo($(lst));
}
function ShowMore() {
if (curStart >= len) {
curStart = 0;
}
$("ul#list li").each(function() {
$(this).remove();
});
var l = curStart;
var html = "";
for (curStart; curStart < (l + count) && curStart < len; curStart++) {
html += "<li>" + items[curStart].html() + "</li>";
}
$(html).appendTo($("ul#list"));
}
</script>
为事件连接jquery:
<script type="text/javascript">
$(document).ready(function() {
BackupList();
$("a#lnkMore").click(function() { ShowMore(); });
});
</script>
答案 4 :(得分:1)
我写了一个hideMaxListItems插件,可能就是你要找的东西。您可以设置列表项的最大数量,幻灯片动画的动画速度以及展开/折叠按钮HTML。幻灯片动画按列表项顺序完成,以提供流畅的动画。
http://www.joshuawinn.com/maximum-list-items-jquery-hide-after-x-number-bullets/