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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
js中的this关键字详解
Sep 25 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python三级菜单的实例
2017/09/13 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python