基于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 相关文章推荐
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
vue中如何自定义右键菜单详解
Dec 08 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php抓取https的内容的代码
2010/04/06 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
List Installed Hot Fixes
2007/06/12 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
python并发2之使用asyncio处理并发
2017/12/21 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
单位创先争优活动方案
2014/01/26 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
职位证明模板
2015/06/23 职场文书
Django框架中表单的用法
2022/06/10 Python