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

前端之家收集整理的这篇文章主要介绍了jQuery实现的手风琴侧边菜单效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《用法总结》

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

原文链接:https://www.f2er.com/jquery/40348.html

猜你在找的jQuery相关文章