显示/隐藏效果
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>
