一个简单的商品显示模式切换功能
通过学习 锋利的jquery(edit 2)学到的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0; padding:0; } div.container{ margin: 0 auto; width: 400px; background-color: #ffd45a; } ul{ overflow: hidden; } li{ float: left; width: 100px; text-align: center; list-style-type: none; } a{ display: block; } div#btn{ width: 400px; text-align: center; margin: 0 auto; } </style> <script src="javascript/jquery-2.2.3.min.js"></script></head><body> <div class="container"> <ul> <li><a href="">APPLE</a></li> <li><a href="">SONY</a></li> <li><a href="">SUM</a></li> <li><a href="">LG</a></li> <li><a href="">MEIZU</a></li> <li><a href="">MI</a></li> <li><a href="">OPPO</a></li> </ul> </div> <div id="btn"><a href="" class="btn">显示全部商品</a> </div> <script> $(function () { var $hi=$("ul li:nth-of-type(n+4)").hide(); $("a.btn").click(function () { if($("a.btn").text()=="显示全部商品"){ $hi.show(); $("a.btn").text("显示精简模式"); } else if ($("a.btn").text()=="显示精简模式"){ $hi.hide(); $("a.btn").text("显示全部商品"); } return false; }) })</script></body></html>
