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限制文本框为整数和货币的函数代码
Oct 13 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
详解JavaScript 高阶函数
Sep 14 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python的range和linspace使用详解
2019/11/27 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
业务助理岗位职责
2013/11/18 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
烟台的海导游词
2015/02/02 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
导游词之西安骊山
2019/12/03 职场文书
golang json数组拼接的实例
2021/04/28 Golang
详解python字符串驻留技术
2021/05/21 Python
在python中读取和写入CSV文件详情
2022/06/28 Python