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手风琴的简单制作
May 12 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
php 特殊字符处理函数
2008/09/05 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
pdo中使用参数化查询sql
2011/08/11 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
秋季运动会稿件
2014/01/30 职场文书
经济管理专业求职信
2014/06/09 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
企业授权委托书范本
2014/09/22 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
工作简报怎么写
2015/07/21 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL