基于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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
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 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python 杀死自身进程的实现方法
2019/07/01 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
教师自荐信范文
2013/12/09 职场文书
全陪导游词
2015/02/04 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书