显示/隐藏效果
html:
<body>
<ul class="uls">
<li>华硕-破晓 宏碁-ConceptD</li>
<li>Redolbook</li>
<li>联想-小新</li>
<li>Proa豆-adolbook</li>
<li>16华硕-灵耀14</li>
<li>16华硕-灵耀14</li>
<li>S雷神911</li>
<li>宏碁-ConceptDThinkBook</li>
<li>13sRedmiBook Air14</li>
<li>联想-小新1</li>
<li>其他品牌</li>
</ul>
<button>收起</button>
<body>
css
<style>
body{
text-align: center;
}
.uls{
width:960px;
margin:50px auto;
list-style: none;
}
.uls::after{
display:block;
content:'';
clear:both;
}
.uls li{
box-sizing: border-box;
float:left;
width:33.333%;
padding:10px;
}
</style>
javascript:
<script src="jquery-1.11.3.js"></script>
<script>
//1.找到触发事件的元素
//2.绑定单击事件
//3.找到需要修改的元素
$('button').click(function(){
//3.找到需要修改的元素 第5个之后 去掉显示/隐藏
var $others=$('.uls li:gt(4):not(:last-child)');
if($others.css('display')=='none'){
$others.show();
$(this).html('收起');
}else{
$others.hide();
$(this).html('显示更多');
}
})
</script>
扫一扫
2457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
