基于Jquery代码实现手风琴菜单


Posted in Javascript onNovember 19, 2015

先给大家展示效果图:

基于Jquery代码实现手风琴菜单

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

<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();

以上代码很简单,代码就是注释,jquery手风琴菜单就实现了。需要的朋友快来参考下吧。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
javascript的var与let,const之间的区别详解
Feb 18 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 #Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 #Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 #Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 #Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
原生js模拟淘宝购物车项目实战
Nov 18 #Javascript
You might like
PHP+javascript液晶时钟
2006/10/09 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
解决python中 f.write写入中文出错的问题
2018/10/31 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python 读取二进制 显示图片案例
2020/04/24 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
师范院校学生自荐信范文
2013/12/27 职场文书
安全生产先进个人材料
2014/02/06 职场文书
节能标语大全
2014/06/21 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年财务部工作总结
2014/11/11 职场文书
干部考察材料范文
2014/12/24 职场文书
财务经理岗位职责
2015/01/31 职场文书
时尚女魔头观后感
2015/06/04 职场文书
国庆阅兵观后感
2015/06/15 职场文书
退休欢送会致辞
2015/07/31 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Python包argparse模块常用方法
2021/06/04 Python