【网页制作】jQuery控制页面侧边栏的收缩与展开

最新推荐文章于 2024-04-28 18:37:34 发布

原创

最新推荐文章于 2024-04-28 18:37:34 发布 · 1.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #jquery

本文通过一个实例展示了如何利用jQuery的next()函数实现页面侧边栏的收缩与展开。代码中详细解释了关键部分，包括点击导航条目时，对应的下拉菜单的显示与隐藏。实例涉及HTML结构、CSS样式和jQuery脚本，适合前端开发者学习。

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战，一个专注于分享网页制作实例的专栏~

专栏文章直链：
【网页制作】制作百度网盘登录页
 【网页制作】注册表单页
 【网页制作】jQuery操作css实现设置箭头图片

人生苦短，我用python

制作要求

使用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

最低0.47元/天解锁文章