JS高级做的导航条。可展开可挂起。可简化。

最新推荐文章于 2021-12-25 22:22:12 发布

dandanZhang

最新推荐文章于 2021-12-25 22:22:12 发布

阅读量829

点赞数

本文链接：https://blog.csdn.net/zshaodan092011/article/details/8818702

版权

编程语言、专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<head>
<title>导航条在项目中的应用</title>
<style type="text/css">
#divFrame
{
width: 500px;
height: 200px;
border: solid 2px #eee;
}
#divHeader
{
width: 500px;
height: 50px;
background-color: #eee;
}
#divMore
{
float:right; padding-top:50px;
}
ul{ list-style-type:none; padding:0px;}
li{ float:left; width:100px; height:30px;}
#sp1
{
float:right; margin-top:0px;
}
#splish
{
font-size:30px;
font-weight:bold;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var numb = 1;
$('#sp1').click(function () {
/*if (numb % 2 != 0) {
$('#divContent').hide(2000);
$('#sp1').text('展开');
}
else {
$('#divContent').show(2000);
$('#sp1').text('挂起');
}
numb++;*/
//判断#divContent的显示与隐藏状态
if ($('#divContent').is(':visible')) {
$('#divContent').hide(2000);
$('#sp1').text('展开');
}
else {
$('#divContent').show(2000);
$('#sp1').text('挂起');
}
})

$('#divMore').click(function () {
if ($('#divMore a').text() == '简化') {
$('li:gt(3)').hide(2000); //获取ul中第4行以后的li
$('#divMore a').text('更多....');
}
else {
$('li:gt(3)').show(2000);
$('#divMore a').text('简化');
}
})
})
</script>
</head>
<body>
<div id="divFrame">
<div id="divHeader">
<span id="splish">图书类别</span>
<span id="sp1">挂起</span>
</div>
<div id="divContent">
<ul>
<li><a href="#">青春</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">周刊</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">营养</a></li>
<li><a href="#">健康</a></li>
<li><a href="#">时事</a></li>
<li><a href="#">国际</a></li>
<li><a href="#">英语</a></li>
<li><a href="#">电子</a></li>
<li><a href="#">公务员</a></li>
<li><a href="#">行测</a></li>
<li><a href="#">申论</a></li>
</ul>
<div id="divMore"><a href="#">简化</a></div>
</div>

</div>
</body>

dandanZhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级做的导航条。可展开可挂起。可简化。

导航条在项目中的应用 #divFrame { width: 500px; height: 200px; border: solid 2px #eee; } #divHeader { width:
复制链接

扫一扫