jQuery实现的手风琴侧边菜单效果


Posted in jQuery onMarch 29, 2017

本文实例讲述了jQuery实现的手风琴侧边菜单效果。分享给大家供大家参考,具体如下:

动手做了一个简单手风琴菜单,上图:

jQuery实现的手风琴侧边菜单效果

点击 B 可收缩 C 列表,点击 C 改变自身和父节点 B 的样式,悬浮时均有不同的样式改变。

先看页面代码,列表的嵌套:

<div id="menuDiv">
<ul id="menu">
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
<li class="parentLi">
<span>B</span>
<ul class="childrenUl">
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
<li class="childrenLi"><span>C</span></li>
</ul>
</li>
</ul>
</div>

css 代码,主要设置背景色和子菜单左边框的样式,设置悬浮和选中的样式,开始设置子菜单不显示(通过 js 设置点击之后再显示):

#menuDiv{
  width: 200px;
  background-color: #029FD4;
}
.parentLi
{
  width: 100%;
  line-height: 40px;
  margin-top: 1px;
  background: #1C73BA;
  color: #fff;
  cursor: pointer;
  font-weight:bolder;
}
.parentLi span
{
  padding: 10px;
}
.parentLi:hover, .selectedParentMenu
{
  background: #0033CC;
}
.childrenUl
{
  background-color: #ffffff;
  display: none;
}
.childrenLi
{
  width: 100%;
  line-height: 30px;
  font-size: .9em;
  margin-top: 1px;
  background: #63B8FF;
  color: #000000;
  padding-left: 15px;
  cursor: pointer;
}
.childrenLi:hover, .selectedChildrenMenu
{
  border-left: 5px #0033CC solid;
  background: #0099CC;
  padding-left: 15px;
}

接下来就是点击事件的代码:

$(".parentLi").click(function(event) {
    $(this).children('.childrenUl').slideToggle();
});
$(".childrenLi").click(function(event) {
    event.stopPropagation();
    $(".childrenLi").removeClass('selectedChildrenMenu');
    $(".parentLi").removeClass('selectedParentMenu');
    $(this).parents(".parentLi").addClass('selectedParentMenu');
    $(this).addClass('selectedChildrenMenu');
});

需要注意的是列表嵌套,会导致事件冒泡,所以在子菜单的点击事件里面要组织冒泡,event.stopPropagation(); 详见 API

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

jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
jQuery插件之validation插件
Mar 29 #jQuery
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 #jQuery
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 #jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
jQuery中的deferred使用方法
Mar 27 #jQuery
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
详解vue中组件参数
2018/07/09 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
Python开发的单词频率统计工具wordsworth使用方法
2014/06/25 Python
python中遍历文件的3个方法
2014/09/02 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
神路信息Java面试题目
2013/03/31 面试题
公司培训欢迎词
2014/01/10 职场文书
治庸问责心得体会
2014/09/12 职场文书
实习科室评语
2015/01/04 职场文书
教师节寄语2015
2015/03/23 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书