jQuery插件实现手风琴二级菜单
更新时间:2021年10月12日 10:46:40 作者:javscp_q
这篇文章主要为大家详细介绍了jQuery插件实现手风琴二级菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单,供大家参考,具体内容如下
HTML5结构要求:
<div id="accordion"> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> <div> <p>一级菜单</p> <div> <p>二级菜单</p> <p>二级菜单</p> <p>二级菜单</p> </div> </div> </div>
在body末尾使用jQuery找到父标签并调用插件函数
<script type="text/javascript"> $("#accordion").accordion(); </script>
导入accordion-css.css文件与accordion-jQuery.js文件
accordion-css.css:
*{padding: 0;margin: 0;} #accordion{ width: 200px; margin: 0 auto; border: 1px solid whitesmoke; } #accordion .list1>p{ padding: 10px 15px; font: 20px "微软雅黑"; font-weight: bold; background: whitesmoke; cursor: pointer; } #accordion .list1>p:hover{ background: lightskyblue; } #accordion .list2>p{ padding: 10px 25px; font: 15px "微软雅黑"; cursor: pointer; } #accordion .list2>p:hover{ background: lightskyblue; } #accordion .list2{ display: none; }
accordion-jQuery.js:
jQuery.fn.accordion = function(){ var $accordion = $(this); $accordion.children().addClass("list1"); $accordion.children().children("div").addClass("list2"); $accordion.on("click",".list1>p",function(){ if($(this).next(".list2").is(":visible")){ $(this).next(".list2").slideUp(); }else{ $(this).next(".list2").slideDown(); $(this).parent().siblings(".list1").children(".list2").slideUp(); } }); }
实现效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery时间插件jquery.clock.js用法实例(5个示例)
这篇文章主要介绍了jQuery时间插件jquery.clock.js用法,结合5个实例简单分析了jQuery时间插件jquery.clock.js的具体使用技巧,需要的朋友可以参考下2016-01-01jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
多选项卡功能的网站有很多,本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了与大家分享,感兴趣的朋友可以参考下哈希望对你有所帮助2013-04-04
最新评论