基于jquery实现简单的手风琴特效


Posted in Javascript onNovember 24, 2015

手风琴效果是项目中使用频率较高的一种效果,本文实例J就为大家讲述了jquery实现简单的手风琴特效代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

基于jquery实现简单的手风琴特效基于jquery实现简单的手风琴特效

具体代码如下:

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程序设计有所帮助,对掌握手风琴特效更加熟练,文章下方有链接的相关文章,希望大家阅读学习。

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
jQuery插件实现无缝滚动特效
Nov 24 #Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 #Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 #Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
You might like
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python 序列的方法总结
2016/10/18 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python常见数字运算操作实例小结
2019/03/22 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python如何定义接口和抽象类
2020/07/28 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
副总经理工作职责
2013/11/28 职场文书
会计应届生的自荐信
2013/12/13 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
1亿有多大教学反思
2014/05/01 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python