一个简单的商品显示模式切换功能
通过学习锋利的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>