JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果【測試可用】
更新時間：2016年06月21日 10:55:31 作者：cherry
這篇文章主要介紹了JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果,可實現(xiàn)基本的菜單折疊與展開功能,涉及javascript響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了JS基于構(gòu)造函數(shù)實現(xiàn)的菜單滑動顯隱效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!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" />
<meta http-equiv="Content-Type" content="; charset=utf-8" />
<title>JS樹型菜單</title>
<script language="javascript">
function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 1;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
/*if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}*/
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight + moveBy;
if (newHeight < fullHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "";
mainInstance.memorize();
}
}, 10);
//this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
var mainInstance = this;
var intId = setInterval(function() {
var curHeight = submenu.offsetHeight;
var newHeight = curHeight - moveBy;
if (newHeight > minHeight)
submenu.style.height = newHeight + "px";
else {
clearInterval(intId);
submenu.style.height = "";
submenu.className = "collapsed";
mainInstance.memorize();
}
}, 10);
};
/*SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};*/
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
</script>
<style type="text/css">
html,body{
height:100%;
margin:0;
font-size:12px;
}
span{
background:#F0DFBE;
border:1px solid #ffffff;
border-left:6px solid #F2A31B;
width:228px;
height:23px;
display:block;
line-height:23px;
padding-left:20px;
}
a{
padding:3px 0 3px 40px;
display:block;
color:#636363;
}
#my_menu{
width:255px;
background:#F7F2E4;
height:100%;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div{
overflow: hidden;
}
</style>
</head>
<body>
<div style="float:left" id="my_menu" class="sdmenu">
<div>
<span>菜單一</span>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
<a href="#">> 菜單一子內(nèi)容</a>
</div>
<div>
<span>菜單二</span>
<a href="#">> 菜單二子內(nèi)容</a>
<a href="#">> 菜單二子內(nèi)容</a>
<a href="#">> 菜單二子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單三</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
<div>
<span>菜單x</span>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
<a href="#">> 菜單三子內(nèi)容</a>
</div>
</div>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了JS中parseInt()和map()用法,結(jié)合實例形式分析了parseInt()和map()方法的功能、參數(shù)、具體用法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
關(guān)于JS打印問題！網(wǎng)上收集+自己總結(jié) ，需要的朋友可以參考下。2009-11-11
Promise，相信每一個前端工程師都或多或少地在項目中都是用過，畢竟它早已不是一個新名詞。ES6中已經(jīng)原生對它加以支持，在caniuse中搜索一下 Promise ，發(fā)現(xiàn)新版的chrome和firefox也已經(jīng)支持。但是低版本的瀏覽器我們可以使用 es6-promise 這個 polyfill 庫來加以兼容。2017-02-02
在一些購物平臺經(jīng)常需要將商品加入購物車，像加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕都是按鈕懸浮底部的，怎么實現(xiàn)這樣的功能呢？下面小編給大家?guī)砹瞬僮靼粹o懸浮固定在微信小程序底部的實現(xiàn)代碼，一起看看吧2019-08-08
JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對象的實現(xiàn)原理，ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化2022-06-06
JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列實例詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之優(yōu)先隊列與循環(huán)隊列,結(jié)合實例形式較為詳細的分析了javascrip數(shù)據(jù)結(jié)構(gòu)中優(yōu)先隊列與循環(huán)隊列的原理、定義與使用方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了JavaScript獲取表單enctype屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
模塊熱替換(HMR)的作用是，在應(yīng)用運行時，無需刷新頁面，便能替換、增加、刪除必要的模塊，本篇文章主要介紹了webpack熱模塊替換（HMR）/熱更新的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
JavaScript實現(xiàn)網(wǎng)頁五子棋小游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript實現(xiàn)樹結(jié)構(gòu)轉(zhuǎn)換的五種方法總結(jié)
在?JavaScript?編程中，將數(shù)組轉(zhuǎn)換為樹結(jié)構(gòu)是一個常見的需求。本篇博客將介紹五種常用的方法來實現(xiàn)數(shù)組轉(zhuǎn)樹結(jié)構(gòu)，希望對大家有所幫助2023-03-03