手风琴效果是项目中使用频率较高的一种效果，原来项目一直都在用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手风琴插件的更多相关文章

  1. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  2. 自定义jquery表格插件

    以前一直都是再用easyui插件来实现各种功能,但是easyui太过于庞大,使用越多对服务器负载影响越大. 基于此,在模仿easyui的dataGrid表格插件的同时,自己去封装了一个.实现了基本的j ...

  3. 自定义Jquery分页插件

    /** * 功能说明:jPager 分页插件 * 参数说明:pages:[] 分页的控件个数 @id:显示分页的div ID,@showSelectPage: 是否显示当前分页的条目过滤下拉框 * @ ...

  4. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  5. 如何创建一个自定义jQuery插件

    简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...

  6. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  7. Jquery学习插件之手风琴

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jQuery自定义滚动条样式插件mCustomScrollbar

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  9. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

随机推荐

  1. UberX及以上级别车奖励政策(优步北京第二、三组)

    优步北京第二.三组: 定义为2015年6月1日至7月19日激活的司机(以优步后台数据显示为准) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版 ...

  2. xcode UIButton创建、监听按钮点击、自定义按钮 、状态 、内边距

    代码创建 //创建UIButton UIButton * btnType=[[UIButton alloc]init]; //设置UIControlStateNormal状态下的文字颜色 [btnTy ...

  3. PHP学习遇到的问题

    使用php ob_start()模板生成html 内容无法撑开 生成后主要的内容 <body><warp><main> 生成后这个几个节点总是固定大小,不能被内容撑 ...

  4. c#Ulong用一个高位Uint和低位Uint表示

    有时候考虑到平台之间的通用性,可能把一个Ulong拆分成2个Uint来进行各平台之间的通讯,当时转换的时候有点头晕,对与或预算不是很熟悉,不过还是花了半小时弄出来了,代码: //ulong的最大值2^ ...

  5. 我使用过的Linux命令

    我使用过的Linux命令之tee - 重定向输出到多个文件 用途说明 在执行Linux命令时,我们可以把输出重定向到文件中,比如 ls >a.txt,这时我们就不能看到输出了,如果我们既想把输出 ...

  6. day7_python学习笔记_chapter9_文件

    1. open(), file(), 作用完全相同 2. 语法: file_object = open(file_name, access_mode='r', buffering='-1') acce ...

  7. python进阶1--数据库支持

    数据库支持 1.连接和游标 1)connect函数,该函数有多个参数,而具体使用那个参数取决于数据库.--连接数据库 常用参数: dsn:数据源名称 user:用户名 password:用户密码 ho ...

  8. SQL Server ansi_null_default | ansi_null_dflt_on

    先说一下这两个变量是一个意思,只是它们的作用范围不同 alter database dbTest set ansi_null_default on;  -- 这个的作用域是整个SQL Server   ...

  9. Oracle字符集转换

            这几天在工作中碰到一个字符乱码的问题,发现在cmd窗口的sqlplus中直接update一个中文和使用@调用一个文件作同样更新的时候,存储的结果 竟不一样.一时比较迷惑,对Oracle ...

  10. 微信平台BAE

    http://www.2cto.com/kf/201405/299487.html http://blog.csdn.net/lyq8479/article/details/26104667 http ...