需要有人盯着这个。有时它适用于jsfiddle,有时它不会!欢迎任何改进。
http://jsfiddle.net/hotdiggity/JBqB3/8/
<ul id="list">
<li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Consectetur adipiscing elit
</a>
</li>
<li >
<a title="title" href="#">Ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Ipsum dolor sit amet</a>
</li>
</ul>
这是jQuery位:
var more = $('<li><a class="more" href="">Show more</a></li>');
var less = $('<li><a class="less" href="">Show less</a></li>');
$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);
$('.more').click(function(){
$(this).parent().hide().siblings('li').show();
$('ul#list').append(less);
return false;
});
$('.less').click(function(){
$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);
return false;
});
答案 0 :(得分:0)
检查一下: http://jsfiddle.net/JBqB3/17/ 解决问题的另一种方法。我不是100%确定你是否正在寻找,因为我从列表中提取了按钮(我认为这是一个更好的方式让它不是一个li元素本身.. 您当然也可以使用可点击而不是标准按钮。 html
<ul id="list">
<li><a title="title" href="#">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Consectetur adipiscing elit
</a>
</li>
<li >
<a title="title" href="#">Ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Lorem ipsum dolor sit amet</a>
</li>
<li>
<a title="title" href="#">Ipsum dolor sit amet</a>
</li>
</ul>
<button class="btn_more">show more</button>
<button class="btn_less">show less</button>
css
.btn_less{
display:none;
}
JS
$(document).ready(function(){
$('ul#list').children('li:gt(2)').hide();
$('.btn_more').click(function(){
$('ul#list').children().show();
$('.btn_more').hide();
$('.btn_less').show();
});
$('.btn_less').click(function(){
$('ul#list').children('li:gt(2)').hide();
$('.btn_less').hide();
$('.btn_more').show();
});
});
答案 1 :(得分:0)
这似乎有效
$(document).ready(function(){
var more = $('<li class="more"><a href="">Show more</a></li>');
var less = $('<li class="less" ><a href="">Show less</a></li>');
$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);
$('body').on('click','.more',function(e){
e.preventDefault();
$(this).remove();
$('ul#list').children().show();
$('ul#list').append(less);
return false;
});
$('body').on('click','.less',function(e){
e.preventDefault();
$(this).remove();
$('ul#list').children('li:gt(2)').hide();
$('ul#list').append(more);
return false;
});
});
请注意,我更改了删除和隐藏的顺序。
e.preventDefault();
只是停止链接作为一个链接,它不是100%必要但我喜欢在那里坚持它,以防href除了#之外的东西。有关详情,请阅读http://api.jquery.com/event.preventDefault/