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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
vue中轮训器的使用
Jan 27 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 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
7个超级实用的PHP代码片段
2011/07/11 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php5与php7的区别点总结
2019/10/11 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
php如何获取Http请求
2020/04/30 PHP
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
一则python3的简单爬虫代码
2014/05/26 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python安装教程
2018/02/28 Python
python 检查文件mime类型的方法
2018/12/08 Python
学习python分支结构
2019/05/17 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
浅析NumPy 切片和索引
2020/09/02 Python
Python基于内置函数type创建新类型
2020/10/22 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
个人授权委托书样本
2014/09/13 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Elasticsearch 聚合查询和排序
2022/04/19 Python