jquery实现点击向下展开菜单项(伸缩导航)效果


Posted in Javascript onAugust 22, 2015

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下:

这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS、css和jquery部分。

运行效果如下图所示:

jquery实现点击向下展开菜单项(伸缩导航)效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>可折叠展开的导航条</title>
<style>
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input,select{font-size:12px;line-height:16px;}
img{border:0;}
ul,li{list-style-type:none;}
a {color:#00007F;text-decoration:none;}
a:hover {color:#bd0a01;text-decoration:underline;}
.box {
width: 150px;
margin: 0 auto;
}
.menu{
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
 background:#EBF3F8;
font-weight:700;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{display:none;}
.menu li ul.level2 li a{
display: block;
height: 28px;
line-height: 28px;
background:#ffffff;
font-weight:400;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
}
.menu li ul.level2 li a:hover{
color:#f60;
}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
 $(".level1 > a").click(function(){
  $(this).addClass("current") //给当前元素添加"current"样式
  .next().show() //下一个元素显示
  .parent().siblings().children("a").removeClass("current")
  //父元素的兄弟元素的子元素<a>移除"current"样式
  .next().hide(); //它们的下一个元素隐藏
  return false;
 });
});
</script>
</head>
<body>
<div class="box">
 <ul class="menu">
  <li class="level1">
   <a href="#none">衬衫</a>
   <ul class="level2">
    <li><a href="#none">短袖衬衫</a></li>
    <li><a href="#none">长袖衬衫</a></li>
    <li><a href="#none">短袖T恤</a></li>
    <li><a href="#none">长袖T恤</a></li>
   </ul>
  </li>
  <li class="level1">
   <a href="#none">卫衣</a>
   <ul class="level2">
    <li><a href="#none">开襟卫衣</a></li>
    <li><a href="#none">套头卫衣</a></li>
    <li><a href="#none">运动卫衣</a></li>
    <li><a href="#none">童装卫衣</a></li>
   </ul>
  </li>
  <li class="level1">
   <a href="#none">裤子</a>
   <ul class="level2">
    <li><a href="#none">短裤</a></li>
    <li><a href="#none">休闲裤</a></li>
    <li><a href="#none">牛仔裤</a></li>
    <li><a href="#none">免烫卡其裤</a></li>
   </ul>
  </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
prettify 代码高亮着色器google出品
Dec 28 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 #Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 #Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 #Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 #Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 #Javascript
js实现点击切换TAB标签实例
Aug 21 #Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 #Javascript
You might like
PHP的历史和优缺点
2006/10/09 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python学生信息管理系统
2018/03/13 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python os.path模块常用方法实例详解
2018/09/16 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
pandas 时间格式转换的实现
2019/07/06 Python
浅谈Python 递归算法指归
2019/08/22 Python
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
关键在于落实心得体会
2014/09/03 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
个人委托书范本
2014/09/13 职场文书
银行奉献演讲稿
2014/09/16 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
python实现自动化群控的步骤
2021/04/11 Python
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript