我有一个很长的无序列表,我想在加载时隐藏除前 3 个之外的所有内容,然后在点击时展开全部。
到目前为止,这是我的 jQuery:
$('#myList').find('li:gt(3)').addClass('togglr').hide().end().append(
$('<li class="show_more_btn">Read more »</li>').click(function(){
$(this).siblings('.togglr').toggle();
if ($(this).hasClass('expanded')){
$(this).text('View All');
$(this).removeClass('expanded');
} else{
$(this).text('View Less');
$(this).addClass('expanded');
}
});
还有我的html:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
这是一个 jsFiddle:http: //jsfiddle.net/t2jrZ/
我哪里错了?