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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
轮播的简单实现方法
Jul 28 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 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
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JavaScript 高级语法介绍
2009/06/15 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python多重继承实例
2014/10/11 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
结对共建工作方案
2014/06/02 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年公司工作总结
2015/04/25 职场文书
首席执行官观后感
2015/06/03 职场文书