框内的点击显示和隐藏

最新推荐文章于 2022-04-11 17:23:51 发布

wojuranshigehaoren

最新推荐文章于 2022-04-11 17:23:51 发布

阅读量224

点赞数

本文链接：https://blog.csdn.net/wojuranshigehaoren/article/details/73613023

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.cal{width:600px;border:1px solid #ff0000;}
ul{width:600px;height:90px;}
.tj{width:600px;height:120px;}
ul li {
float: left;
list-style-type: none;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
ul li.kkk{display:none;}
a{text-decoration:none;}
.show{height:30px;line-height:30px;text-align:center;}
*{margin:0;padding:0;}
</style>
<meta charset="utf-8" />
</head>
<body>
<div class="cal">
<ul>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">佳能</a><i>(2455)</i></li>
<li class="kkk"><a href="#">佳能</a><i>(2455)</i></li>
<li class="kkk"><a href="#">佳能</a><i>(2455)</i></li>
<li class="kkk"><a href="#">佳能</a><i>(2455)</i></li>
<li class="kkk"><a href="#">佳能</a><i>(2455)</i></li>
<li><a href="#">其他品牌</a><i>(2455)</i></li>
</ul>
<div class="show"><a href="#">显示所有品牌</a></div>
</div>
<script>
$(function () {
var $dj = $("ul li:gt(5):not(:last)");//从第六个开始到不是最后一个，
$dj.hide();//隐藏
var $xs = $("div.show>a");
$xs.click(function () {
if ($dj.is(":visible"))
{
$dj.hide(); $xs.text("显示所有品牌"); $("ul").removeClass("tj");
}//如果可见，就隐藏并移除类tj
else {
$dj.show(); $xs.text("简单的品牌"); $("ul").addClass("tj");
//如果不可见，就显示并添加类tj
return false;//阻止回传
}
});
});
</script>
</body>
</html>