jq淘宝品牌 显示更多 收起功能的练习
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
border-style:none;
list-style:none;}
#outer{
margin:20px auto;
border:solid 1px black;
width:600px;
}
li{
padding:6px 0;
float:left;
width:200px;
margin:0 auto;
text-align:center;}
p{
clear:both;
border:solid 1px;
text-align:center;
width:160px;
margin:0 auto;
cursor:pointer;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<ul>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>佳能</li>
<li>其他品牌</li>
</ul>
<p id="hide-show">隐藏所有内容</p>
<label for="hide-show"></label>
</div>
<script>
$(document).ready(function(e) {
$("#hide-show").click(function(){
//改变按键的文字
console.log($("#hide-show").html());
var showStage=$("#hide-show").html();
if(showStage.match("隐藏")=="隐藏"){
$("#hide-show").html("显示所有内容");
}else{
$("#hide-show").html("隐藏所有内容");
}
//实现功能
$("li:gt(2):not(:last)").slideToggle(500);
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029480
页:
[1]