jquery手风琴特效插件


Posted in Javascript onFebruary 04, 2015

手风琴效果是项目中使用频率较高的一种效果,原来项目一直都在用easyui的,临近年末,试着自己写了一个

css样式

/* CSS Document */

body {

    margin: 0 auto;

    padding: 0 auto;

    font-size: 9pt;

    font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;

}

.accordion {

    padding-left: 0px;

}

.accordion li {

    border-top: 1px solid #000;

    list-style-type: none;

}

.titlemenu {

    width: 100%;

    height: 30px;

    background-color: #F2F2F2;

    padding: 5px 0px;

    text-align: left;

    cursor: pointer;

}

.titlemenu img {

    position: relative;

    left: 20px;

    top: 5px;

}

.titlemenu span {

    display: inline-block;

    position: relative;

    left: 40px;

}

.submenu {

    text-align: left;

    width: 100%;

    padding-left: 0px;

}

.submenu li {

    list-style-type: none;

    width: 100%;

}

.submenu li img {

    position: relative;

    left: 20px;

    top: 5px;

}

.submenu li a {

    position: relative;

    left: 40px;

    top: 5px;

    text-decoration: none;

}

.submenu li span {

    display: inline-block;

    height: 30px;

    padding: 5px 0px;

}

.hover {

    background-color: #4A5B79;

}

自定义js

(function ($) {

    piano = function () {

        _menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';

        return ep = {

            init: function (obj) {

                _menu = eval('(' + _menu + ')');

                 var li ="";

                $.each(_menu, function (index, element) {

                    li += '<li><div class="titlemenu"><img src=' + element.img + ' width="16" height="16"  alt=""/><span>' + element.title + '</span></div>';

                    if(element.submenu!=null)

                    {

                        li+='<ul class="submenu">';

                        $.each(element.submenu, function (ind, ele) {

                            li += '<li><img src=' + ele.img + ' width="16" height="16"  alt=""/><span><a href="#">' + ele.title + '</a></span></li>';

                        });

                        li+='</ul>';

                    }

                    li+='</li>';

                });

                obj.append(li);

            }

        }

    }

    $.fn.accordion = function (options) {

        var pia = new piano();

        pia.init($(this));

        return this.each(function () {

            var accs = $(this).children('li');

             accs.each(reset);

            accs.click(onClick);

            var menu_li = $(".submenu").children("li");

            menu_li.each(function (index, element) {

                $(this).mousemove(function (e) {

                    $(this).siblings().removeClass("hover");

                    $(this).find("a").css("color", "#fff");

                    $(this).siblings().find("a").css("color", "#000");

                    $(this).addClass("hover");

                });

            });

        });

    }

    function onClick() {

        $(this).siblings('li').find("ul").each(hide);

        $(this).find("ul").slideDown('normal');

        return false;

    }

    function hide() {

        $(this).slideUp('normal');

    }

    function reset() {

        $(this).find("ul").hide();

    }

})(jQuery);

html调用方式

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script src="jquery-1.8.0.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

<script src="accordion.js"></script>

<script type="text/javascript">            

    $(function(){

        $("#accordion").accordion();

    });

</script>

</head>

<body>

<ul id="accordion"  class="accordion" style="width:200px;height:500px;">

</ul>

</body>

</html>

显示效果

jquery手风琴特效插件

jquery手风琴特效插件

以上就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
bootstrap实现每隔5秒自动轮播效果
Dec 20 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
Jquery中find与each方法用法实例
Feb 04 #Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 #Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 #Javascript
15款jQuery分布引导插件分享
Feb 04 #Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 #Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 #Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 #Javascript
You might like
PHP实现图片简单上传
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
如何使用PHP实现javascript的escape和unescape函数
2013/06/29 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
Python中的Descriptor描述符学习教程
2016/06/02 Python
python函数的5种参数详解
2017/02/24 Python
python得到电脑的开机时间方法
2018/10/15 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
公司薪酬管理制度
2014/01/31 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
公司活动总结范文
2014/07/01 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
Python爬取某拍短视频
2021/06/11 Python
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python