这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript slide控件演示</title>
<style type="text/css">
/*reset*/
dl,ul,li,dt,dd{ margin:0; padding:0; list-style:none; }
/*silding*/
.silding{ width:200px; border:1px solid #ccc; line-height:25px; overflow:hidden;}
.silding dt{border-bottom:1px solid #ccc; background-color:#bebebe; cursor:pointer}
.silding dd{ display:none; background:#efefef; overflow:hidden; font-size:12px; }
.silding .active{ font-weight:bold;}
</style>
<script type="text/javascript">
function Slider(i, panelHeight) { //dto
this.index = i;
this.panelHeight = panelHeight;
}

//class Sliding {
function Sliding(activeIndex) {
this.commands = [];
this.panels = [];
this.activeIndex = activeIndex || 0;
this.sliderCache = {};
}
Sliding.prototype = {
//绑定事件
init: function(eventName, activeCssClass) {
var _this = this;
var cmds = _this.commands;
_this.activeClass = activeCssClass;
for (var i = 0, n = cmds.length; i < n; i++) {
cmds[i]["on" + eventName] = function(e) {
_this.handel(this, e);
}
cmds[i].index = i;
if (i == _this.activeIndex) {
_this.sliderCache = new Slider(i, _this.panels[i].offsetHeight);
}
}

},
//事件处理函数
handel: function(elem, args) {
var _this = this;
var index = elem.index;
var cacheIndex = _this.sliderCache.index;
var cacheElem = _this.commands[cacheIndex];
if (index == cacheIndex) return;
var showPanel = _this.panels[index];
var hidePanel = _this.panels[cacheIndex];
var h = parseInt(_this.sliderCache.panelHeight);
showPanel.style.height = "0px";
showPanel.style.display = "block";
_this.tween(hidePanel, showPanel, h);
elem.className = _this.activeClass;
cacheElem.className = cacheElem.className.replace(eval("/ ?"+_this.activeClass+" ?/"),"");
_this.sliderCache = new Slider(index, h);

},
//动画算法
tween: function(obj0, obj1, h) {
_this = arguments.callee;
var step = 20;
if ("\v" == "v") {
step = 30;
}
if (h > 0) {
var h0 = obj0.offsetHeight;
var h1 = obj1.offsetHeight;
if (h < step) {
obj0.style.display = "none";
obj0.style.height = (h1 + h) + "px";
obj1.style.height = (h1 + h) + "px";

} else {
h = h - step;
obj0.style.height = (h0 - step) + "px";
obj1.style.height = (h1 + step) + "px";
setTimeout(function() {
_this(obj0, obj1, h)
},
50)
}
}
}
}
//}
</script>
</head>

<body>
<div id="silding" class="silding">
<dl>
<dt class="active">第一个一级菜单</dt>
<dd style="display:block;">
<ul>
<li><a href="#">第一个二级菜单</a></li>
<li>第一个二级菜单</li>
<li>第一个二级菜单</li>
</ul>
</dd>
</dl>
<dl>
<dt>第二个一级菜单</dt>
<dd>
<ul>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
<li>第二个二级菜单</li>
</ul>
</dd>
</dl>
<dl>
<dt>第三个一级菜单</dt>
<dd>
<ul>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
<li>第三个二级菜单</li>
</ul>
</dd>
</dl>
</div>
<script type="text/javascript">
var $sliding = document.getElementById("silding");
var s1 = new Sliding();
s1.commands = $sliding.getElementsByTagName("dt");
s1.panels = $sliding.getElementsByTagName("dd"); ;
s1.init("mouseover", "active");
</script>
</body>
</html>

转载于:https://www.cnblogs.com/axl234/p/3759158.html

使用javascript oop开发滑动（slide) 菜单控件相关推荐

  1. mysql抽屉图标_React Native自定义组件实现抽屉菜单控件效果

    一.需求分析 原生开发中,自定义View可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求.五花八门的产品设计需要我们做出不同的View.关于自定义View的内容网上已经有很多的博文,本篇博客要 ...

  2. android 酷狗demo_Android仿酷狗音乐自定义侧滑菜单控件简单实现

    随着Android的不断成熟,许多绚丽的效果也在不断的被大家开发出来,其中侧滑的效果用到的项目很多,用的好的更是给吸引了很多用户.国内像QQ和酷狗App的侧滑就很给力,所以查了一些资料,并结合View ...

  3. Android仿酷狗音乐自定义侧滑菜单控件简单实现

    随着Android的不断成熟,许多绚丽的效果也在不断的被大家开发出来,其中侧滑的效果用到的项目很多,用的好的更是给吸引了很多用户.国内像QQ和酷狗App的侧滑就很给力,所以查了一些资料,并结合View ...

  4. VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程

    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程 开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是 ...

  5. C#开发学习——web服务器端控件

    Asp.net在客户端开发和web开发所用到的控件还是有很大的差别的,而且Web开发的界面是在浏览器中显示的,所以控件的设计都和前边学习HTML设计有联系,没有客户端开发那么简单,不过我们可以通过专门 ...

  6. 葡萄城首席架构师：前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  7. SNF开发平台WinForm-Grid表格控件大全

    我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件:   1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...

  8. 基于WP7开发的Silverlight常用控件详解

    Silverlight是一个跨浏览器.跨客户平台的技术,能够设计.开发和发布有多媒体体验与富交互(RIA,Rich Interface Application)的网络交互程序. 针对Windows P ...

  9. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据（树形导航）的webpart开发及问题...

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

最新文章

  1. bootstap 表格自动换行 截取超长数据
  2. RAD Studio XE2/XE3 官方 ISO 下载地址 (2012-09-05更新)
  3. Jquery 复选框全选与反选点击执行一次然后失效解决方案
  4. openNebula 搭建
  5. Poj 3522 最长边与最短边差值最小的生成树
  6. 一起学nRF51xx 5 -  ppi
  7. Scratch第四十九讲：完美的下落和反弹
  8. 最大排列问题的算法实现（Python）究竟最后调换位置的有哪几个？
  9. 订阅广告一个微博大号的微信生存记
  10. Stream is the new file
  11. VoIP协议标准浅析
  12. SpringBoot_配置-@Conditional自动配置报告
  13. 论文浅尝 | Learning with Noise: Supervised Relation Extraction
  14. Prime Time UVA - 10200
  15. netty 权威指南~第11章——WebSoket协议开发
  16. 数组（Java基础内容）
  17. VARCHART XGantt v5.2用户手册：甘特图如何Drag Drop
  18. 计算机课学生段密码,启课程学生端电脑版
  19. java生成二维码到文件，java生成二维码转成BASE64
  20. 神操作 | 不重启 JVM，替换掉已经加载的类，偷天换日？

热门文章

  1. 通用AI咋发展？向大脑学习是条路子
  2. 探索“植物人”语言能力和意识水平
  3. 深度解读：人体防御病毒的免疫力究竟是什么？
  4. ​采访了14位技术公司的创始人，他们如何看待2020年的AI行业？
  5. 存在描述所有生命的方程吗？
  6. 前沿地带：从量子计算到量子互联网
  7. 何恺明CVPR演讲：深入理解ResNet和视觉识别的表示学习（41 PPT）
  8. 智慧停车产业链市场全透析
  9. 异构智能吴韧：物联网是“伪命题”？智联网才是未来
  10. 涌进体制的技术人：Nature 发文硕士回乡当公务员