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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python中dir函数用法分析
2015/04/17 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
python实现五子棋小程序
2019/06/18 Python
Python各种扩展名区别点整理
2020/02/27 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
21岁生日感言
2014/02/27 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
银行奉献演讲稿
2014/09/16 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
周一问候语大全
2015/11/10 职场文书
晚会开幕词范文
2016/03/04 职场文书
检讨书怎么写?
2019/06/21 职场文书
python基础之爬虫入门
2021/05/10 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技