<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>更多商品展示</title> <style> * { margin: 0; padding: 0; } .box { width: 500px; margin: 100px auto; border: 5px solid green; text-align: center; } ul { margin-top: 10px; overflow: hidden; } li { list-style-type: none; float: left; width: 150px; height: 50px; cursor: pointer; } a:hover { text-decoration: underline; font-weight: bold; color: orange; } </style> </head> <body> <div class="box"> <span>手机品牌</span> <ul> <li><a>苹果(28479492)</a></li> <li><a>华为(38479493)</a></li> <li><a>OPPO(18479495)</a></li> <li><a>VIVO(18479213)</a></li> <li><a>小米(33479492)</a></li> <li><a>魅族(237872)</a></li> <li><a>一加(847949)</a></li> <li><a>坚果(4789949)</a></li> <li><a>美图(8479149)</a></li> <li><a>黑莓(479429)</a></li> <li><a>三星(20847949)</a></li> <li><a>努比亚(2847949)</a></li> <li><a>索尼(20847949)</a></li> <li><a>诺基亚(12847949)</a></li> <li><a>360(12847949)</a></li> </ul> <button>更多品牌↓</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script> $(function(){ // 选中更多的内容 var more = $('li:gt(5)') // 隐藏更多内容 more.hide() $('button').click(function(){ // 判断状态 if (more.is(':hidden')) { // 隐藏状态，转换为显示状态 more.slideDown(500) $(this).html('收起↑') } else { // 显示状态，转换为隐藏状态 more.slideUp(500) $(this).html('更多品牌↓') } }) }) </script> </html>
