基于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 相关文章推荐
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
js+css实现扇形导航效果
Aug 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
js中eval详解
2012/03/30 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python 读取文件并替换字段的实例
2018/07/12 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
英文自荐信
2013/12/15 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
班干部演讲稿
2014/04/24 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
幼儿园见习总结
2015/06/23 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python