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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JS实现禁止鼠标右键的功能
Oct 15 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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向浏览器输出内容的4个函数总结
2014/11/17 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python实现UDP协议下的文件传输
2020/03/20 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
工程招投标邀请书
2014/01/30 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
八一建军节感言
2014/02/28 职场文书
房产继承公证书
2014/04/09 职场文书
党支部活动策划方案
2014/08/18 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
2015最新民情日记范文
2015/06/26 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers