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

2019-11-20 11:10:37

字体：大中小

来源：转载

供稿：网友

手风琴效果是项目中使用频率较高的一种效果，本文实例J就为大家讲述了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程序设计有所帮助，对掌握手风琴特效更加熟练，文章下方有链接的相关文章，希望大家阅读学习。

上一篇：基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

下一篇：jQuery插件实现无缝滚动特效