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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
JS实现复制功能
Mar 01 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
JavaScript原型链详解
Nov 07 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
文章推荐系统(三)
2006/10/09 PHP
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP+DBM的同学录程序(3)
2006/10/09 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python time模块用法实例详解
2014/09/11 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
struct与class的区别
2014/02/03 面试题
学生自我鉴定范文
2013/10/04 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
刊首寄语大全
2014/04/11 职场文书
紧急通知
2015/04/17 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
MySQL 数据库范式化设计理论
2022/04/22 MySQL