JQuery制作的导航条

最新推荐文章于 2022-04-07 20:00:40 发布

wangjingjing1014

最新推荐文章于 2022-04-07 20:00:40 发布

阅读量883

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/wangjingjing1014/article/details/8815516

jQuery 专栏收录该内容

27 篇文章

订阅专栏

<!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;}
#divFrame{ border:1px solid #666; width:300px; overflow:hidden}
#divFrame .divHead{ background-color:#eee; padding:8px; height:18px; cursor:hand;}
#divFrame .divHead h3{ padding:0px; margin:0px; float:left}
#divFrame .divHead span{ float:right; margin-top:3px;}
#divFrame .divContent{ padding:8px}
#divFrame .divContent ul{ list-style-type:none; margin:0px; padding:0px}
#divFrame .divContent ul li{ float:left; width:95px; height:23px; line-height:23px}
#divFrame .divBot{ 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 () {
$('.divHead').click(function () {
if ($('.divContent').is(':visible')) {

$('.divHead span').html('展开');
$('.divContent').hide(3000);

}
else {
$('.divHead span').html('挂起');
$('.divContent').show(3000);
}

});

$('.divBot>a').click(function () {
if ($('.divBot>a').text() == '简化') {
$('ul li:gt(4):not(:last)').hide(3000);
$('.divBot>a').text('更多');
}
else {
$('ul li:gt(4):not(:last)').show(3000).css('background-color', '#eee');
$('.divBot>a').text('简化');

}

});

});
</script>
</head>
<body>
<div id="divFrame">
<div class="divHead"><h3>图书分类</h3>
<span>挂起</span>
</div>
<div class="divContent">
<ul>
<li><a href="#">小说（1100）</a></li>
<li><a href="#">文艺（230）</a></li>
<li><a href="#">青春（1430）</a></li>
<li><a href="#">少儿（1560）</a></li>
<li><a href="#">生活（870）</a></li>
<li><a href="#">社科（1460）</a></li>
<li><a href="#">管理（1450）</a></li>
<li><a href="#">计算机（1780）</a></li>
<li><a href="#">教育（930）</a></li>
<li><a href="#">工具书（3450）</a></li>
<li><a href="#">引进版（980）</a></li>
<li><a href="#">其他类（3230）</a></li>

</ul>
</div>
<div class="divBot">
<a href="#">简化</a>
</div>

</div>
</body>

</html>

如图1点击右上角的挂起，中间的内容部分会慢慢隐藏实现图2的效果；

图1