🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战 ，一个专注于分享网页制作实例的专栏~
专栏文章直链：
【网页制作】制作百度网盘登录页
【网页制作】注册表单页
【网页制作】jQuery操作css实现设置箭头图片
制作要求
使用jQuery中的 next() 函数控制页面侧边栏的收缩与展开。
制作效果图
参考源代码
目录结构
└──网页文件夹
├── css
│ └──style.css
├── images
│ ├──home_sprite.png
│ ├──logo.png
│ ├──new_book.png
│ └──sprite.png
├── js
│ └──jquery-1.12.4.js
└──index.html
style.css
*{padding:0;margin:0;}
html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}
a{text-decoration:none;color:#1a66b3;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.clearfix{clear:both;overflow:hidden;height:0;}
.wrap{width:800px;margin:0 auto;}
/**头部**/
.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
.top,.top a{color:#646464;}
.top a:hover{color:#ff2832;}
.top-l .top-login{color:#ff2832;margin-right:5px;}
.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
.top-m > li a{display:block;padding:0 8px;}
.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}
.top-m > li a i{margin-right:6px;margin-top:3px;}
.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}
.top-m ul.topDown li{line-height:24px;}
.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}
.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}
.wrap img[alt='logo']{margin: 10px 0;}
.nav {
float: left;
width: 200px;
margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px; font-size: 14px;}
.content{
float: left;
width: 548px ;
border: 1px #cccccc solid;
padding: 10px;}
.content p{font-size: 14px;color: #666666; padding-bottom: 15px; }
.content li{padding-left: 20px;}
.content li a{color: #666666; line-height: 30px; padding-left: 3px; }
.content li a:hover{text-decoration: underline;}
home_sprite.png
logo.png
new_book.png
sprite.png
jquery-1.12.4.js
自行下载，可以用高版本，也可私信联系获得。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>京东常见问题分类页面</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="top">
<div class="wrap">
<div class="top-l left">欢迎光临京东，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
<ul class="top-m right">
<li><a href=""><i class="top-car left"></i>购物车</a></li>
<li class="line"></li>
<li><a href="">我的交易单</a></li>
<li class="line"></li>
<li><a href="">会员中心</a></li>
<li class="line"></li>
<li><a href=""><i class="top-tel left"></i>我的关注</a></li>
<li class="line"></li>
<li class="on">
<a href="" class="menu-btn">联系客服</a>
<ul class="topDown">
<li><a href="">帮助中心</a></li>
<li><a href="">我要吐槽</a></li>
<li><a href="">在线客服</a></li>
<li><a href="">咨询JIMI</a></li>
<li><a href="">客服邮箱</a></li>
</ul>
</li>
<li class="line"></li>
<li><a href="" class="menu-btn">手机金融</a></li>
<li class="line"></li>
<li><a href="" class="menu-btn">网站导航</a></li>
<li class="line"></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="wrap">
<a href=""><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="wrap">
<nav class="nav">
<header>常见问题分类</header>
<ul>
<li><dl>
<dt>京东金融</dt>
<dd><a href="#">京东金融简介</a></dd>
<dd><a href="#">京东金融会员</a></dd>
<dd><a href="#">京东金融安全中心</a></dd>
</dl></li>
<li><dl>
<dt>理财</dt>
<dd><a href="#">京东小金库</a></dd>
<dd><a href="#">京东基金理财</a></dd>
<dd><a href="#">京东保险理财</a></dd>
<dd><a href="#">小白理财</a></dd>
<dd><a href="#">智投理财</a></dd>
<dd><a href="#">乐猜</a></dd>
</dl></li>
<li><dl>
<dt>白条</dt>
<dd><a href="#">京东白条</a></dd>
<dd><a href="#">京东金条</a></dd>
<dd><a href="#">校园白条</a></dd>
<dd><a href="#">教育白条</a></dd>
<dd><a href="#">乡村白条</a></dd>
<dd><a href="#">京东金采</a></dd>
<dd><a href="#">京农贷</a></dd>
</dl></li>
<li><dl>
<dt>众筹</dt>
<dd><a href="#">产品众筹</a></dd>
<dd><a href="#">轻众筹</a></dd>
<dd><a href="#">产品众筹发起者常见问题</a></dd>
<dd><a href="#">产品众筹支持者常见问题</a></dd>
<dd><a href="#">产品众筹永久众筹常见问题</a></dd>
<dd><a href="#">京东众创常见问题</a></dd>
</dl></li>
<li><dl>
<dt>京东钱包</dt>
<dd><a href="#">京东钱包简介</a></dd>
<dd><a href="#">自动服务及常见问题</a></dd>
<dd><a href="#">购房盈</a></dd>
</dl></li>
</ul>
</nav>
<section class="content">
<p>京东金融 > 京东金融会员</p>
<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>
</ul>
</section>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav dt").click(function(){
for (let i = 0, start = $(this).next();i < 10;i++, start = start.next()) {
start.toggle();
}
});
});
</script>
</body>
</html>
部分解释
这段代码中，
start.next() 是获取下一个响铃元素；
start.toggle() 是如果处于隐藏状态则显示、如果处于显示状态就隐藏。
致谢
本篇实例素材来自于 X Y H 🧡 ~
3211
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
