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>css
