jquery 商品展示更多
<!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>
