假设我有
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
我想要 jQuery 代码隐藏所有<li>
然后展示第一个和第二个
然后append()
额外的<li>more</li>
用于切换
隐里。
这应该可以做到..
// hide all li and then show the first two
$('ul li').hide().filter(':lt(2)').show();
// append a li with text more that on click will show the rest
$('ul').append('<li>more</li>').find('li:last').click(function(){
$(this).siblings(':gt(1)').toggle();
});
demo :
$('ul li').hide().filter(':lt(2)').show();
$('ul').append('<li>more</li>').find('li:last').click(function() {
$(this).siblings(':gt(1)').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
更新以添加从多到少的更改文本..
$('ul li')
.hide()
.filter(':lt(2)')
.show();
$('ul')
.append('<li><span>more</span><span class="less">less</span></li>')
.find('li:last')
.click(function(){
$(this)
.siblings(':gt(1)')
.toggle()
.end()
.find('span')
.toggle();
});
需要一个CSS规则.less{display:none}
demo :
$('ul li')
.hide()
.filter(':lt(2)')
.show();
$('ul')
.append('<li><span>more</span><span class="less">less</span></li>')
.find('li:last')
.click(function() {
$(this)
.siblings(':gt(1)')
.toggle()
.end()
.find('span')
.toggle();
});
.less {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)