gpt4 book ai didi

javascript - 如何 chop 无序列表并允许用户单击以显示全部?

转载 作者:行者123 更新时间:2023-12-02 18:58:13 24 4
gpt4 key购买 nike

我有一个很长的无序列表,我想在加载时隐藏除前 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/

我哪里出错了?

最佳答案

你就快到了!也许只是想太多;)

当前代码的问题是当前脚本末尾的最后一个 });,将其替换为 }));

HTML

<ul id="info">
<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>
<button type="button" onclick="showAll();">Show All</button>

Javascript:

var limit = 3;
$('#info li:lt(' + limit + ')').show();
$('button').click(function(){
$('#info li').show();
});

http://jsfiddle.net/t2jrZ/2/

关于javascript - 如何 chop 无序列表并允许用户单击以显示全部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15103404/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com