导航条（收起展开）

最新推荐文章于 2021-06-20 11:58:47 发布

Dlinlin

最新推荐文章于 2021-06-20 11:58:47 发布

阅读量3.7k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/linlin2294592017/article/details/8815865

版权

JS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-size: 13px;
}
#divTotle
{
border: solid 1px #eee;
width: 301px;
overflow: hidden;
}
#divTitle
{
background-color: #eee;
padding: 8px;
height: 18px;
cursor: hand;
}
#divTitle h3
{
padding: 0px;
margin: 0px;
float: left;
}
#divTitle span
{
float: right;
margin-top: 3px;
}
#divContet
{
padding: 8px;
height:120px;
}
#divContet ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#divContet ul li
{
float: left;
width: 95px;
height: 23px;
line-height: 23px;
}
#divJianhua
{
float: right;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#divTitle a').click(function () {
if ($('#divContet ul').is(':visible')) {
$('#divContet ul').hide(2000);
$(this).html('展开');
}
else {
$('#divContet ul').show(2000);
$(this).html('收起');
}
})
$('#divJianhua a').click(function () {
if ($('#divContet ul li:gt(4)').is(':visible')) {
$('#divContet ul li:gt(4)').hide();
$('#divJianhua a').html('更多');
}
else {
$('#divContet ul li:gt(4)').show();
$('#divJianhua a').html('简化');
}
})
})

</script>
</head>
<body>
<div id="divTotle">
<div id="divTitle">
<h3>
图书分类</h3>
<a href="#">收起</a>
</div>
<div id="divContet">
<ul>
<li><a href="#">小说</a><i>(1110)</i></li>
<li><a href="#">文艺</a><i>(230)</i></li>
<li><a href="#">青春</a><i>(1430)</i></li>
<li><a href="#">少儿</a><i>(1560)</i></li>
<li><a href="#">生活</a><i>(870)</i></li>
<li><a href="#">社科</a><i>(1460)</i></li>
<li><a href="#">管理</a><i>(1450)</i></li>
<li><a href="#">计算机</a><i>(1780)</i></li>
<li><a href="#">教育</a><i>(930)</i></li>
<li><a href="#">工具书</a><i>(3450)</i></li>
<li><a href="#">引进版</a><i>(980)</i></li>
<li><a href="#">其他类</a><i>(3230)</i></li>
</ul>
<div id="divJianhua">
<a href="#">简化</a>
</div>
</div>
</div>
</body>
</html>