选择相机品牌

来源：互联网发布：php数组循环编辑：程序博客网时间：2024/04/29 19:25

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
float: left;
margin: 10px 20px;
}
ul{
overflow: hidden;
}
.sub{
width: 500px;
/* height: 200px;*/
border: 1px solid #999;
}
span{
display: inline-block;
background: red;
}
.showmore{
text-align: center;
margin-bottom: 20px;
color: #fff;
}
.showmore a{
color: #fff;
}
</style>
</head>
<body>
<div class="sub">
<ul>
<li><a href="#">奥林巴斯</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(30440)</i></li>
<li><a href="#">三星</a><i>(30440)</i></li>
<li><a href="#">松下</a><i>(30440)</i></li>
<li><a href="#">卡西欧</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">其他品牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span><span>0</span></a>
</div>
</div>
<script src="../jQuery/jquery-1.12.0.min.js"></script>
<script>
$(function(){
/*选择出索引值大于5，并且除了最后一个*/
var $hide=$("ul li:gt(5):not(:last)");
/*默认情况隐藏显示的内容*/
$hide.hide();
/*找见class为showmore的元素*/
var $btn=$(".showmore");
/*给$btn添加点击事件*/
$btn.click(function(){
/*判断$hide的可见性*/
if($hide.is(':visible')){
/*元素隐藏的方法*/
$hide.hide();
/*btn找见span，改变背景，改变内容*/
$(this).find("span").eq(0).css("background","green").text("显示全部");
}else {
/*元素显示的方法*/
$hide.show();
/*btn找见span，改变背景，改变内容*/
$(this).find("span").eq(0).css("background","red").text("精简显示");
}
})
})
</script>
</body>
</html>

阅读全文

0 0