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 相关文章推荐
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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/07/12 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
住房公积金接收函
2014/01/09 职场文书
2014财务年终工作总结
2014/12/08 职场文书
学校教学工作总结2015
2015/05/19 职场文书
尊师重教主题班会
2015/08/14 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python