前言
??今天來跟大家分享一下如何制作一個(gè)網(wǎng)頁中的左側(cè)菜單凑术，這個(gè)功能對(duì)于網(wǎng)頁來說也是常用的功能之一履澳，相當(dāng)于書簽一樣的功能。那么今天我們就來說一說如何實(shí)現(xiàn)一個(gè)折疊層級(jí)菜單的功能。
??那么折疊層級(jí)菜單長(zhǎng)什么樣签钩？下面我們來直觀的看一下硬霍，如下圖所示就是一個(gè)簡(jiǎn)單的層級(jí)菜單帜慢，共有四個(gè)菜單選項(xiàng)，選擇哪一個(gè)選項(xiàng)就對(duì)應(yīng)地菜單下面相應(yīng)的內(nèi)容唯卖，如下截圖所示：
??那么對(duì)于這樣的層級(jí)菜單如何實(shí)現(xiàn)呢粱玲？用原生的javascript+css就可以來實(shí)現(xiàn)，而且實(shí)現(xiàn)起來也不是很難拜轨，這里主要是通過用css對(duì)菜單定義兩種狀態(tài)抽减，一個(gè)用于折疊時(shí)顯示，另一個(gè)用于展開時(shí)顯示撩轰，而這兩個(gè)狀態(tài)的切換則使用JavaScript的單擊響應(yīng)函數(shù)來完成胯甩。在用JavaScript做狀態(tài)切換時(shí)，我這里使用的是排他思想堪嫂，也就當(dāng)前點(diǎn)擊的菜單是一種狀態(tài)偎箫，其他的都是另一種狀態(tài)，而實(shí)現(xiàn)排他思想的手段則是雙重for循環(huán)和自定義屬性皆串。下面來看一下具體如何實(shí)現(xiàn)吧淹办，具體代碼如下：
<html>
<head>
<title>折疊層級(jí)菜單</title>
<style type="text/css">
body{margin: 0;text-align: center;}
#mymenu {display: inline-block;margin:50px 100px 0 0;text-align: left;width: 23%;}
#mymenu div{overflow: hidden;border-bottom: 10px solid #fff;}
.menuspan{display: block;overflow: hidden;text-align: left;background-color: #d5a6bd;color: #ffffff;padding-left: 10px;height: 25px;line-height: 25px;}
.menuspan:hover {color: grey;text-decoration: underline;}
#mymenu a {display: block;padding-left: 30px;}
#mymenu a:hover {color: grey;text-decoration: underline;}
#mymenu div.collapsed{height: 25px;}
</style>
<script type="text/javascript">
window.onload = function(){
function hasclass(obj,clsname){
var reg = new RegExp('\\b'+clsname+'\\b');
return reg.test(obj.className);
}
function addclass(obj,clsname){
if(!hasclass(obj,clsname)){
obj.className += ' ' + clsname;
}
}
function removeclass(obj,clsname){
var reg = new RegExp('\\b'+clsname+'\\b');
obj.className = obj.className.replace(reg,'');
}
function toggleclass(obj,clsname){
var reg = new RegExp('\\b'+clsname+'\\b');
if(hasclass(obj,clsname)){
removeclass(obj,clsname);
}else{
addclass(obj,clsname);
}
}
function getstyle(obj, styname) {
if(window.getComputedStyle){
return getComputedStyle(obj,null)[styname];
}else{
return obj.currentStyle[styname];
}
}
var menuspan = document.querySelectorAll('.menuspan');
for(var i=0;i < menuspan.length;i++){
menuspan[i].index = i;
menuspan[i].onclick = function(){
var parentdiv = this.parentNode;
toggleclass(parentdiv,'collapsed');
for(var j=0;j< menuspan.length;j++){
var otherdiv = menuspan[j].parentNode;
if(this.index != menuspan[j].index){
addclass(otherdiv,'collapsed');
}
}
}
}
}
</script>
</head>
<body>
<div id='mymenu'>
<div class="collapsed">
<span class="menuspan">在線工具</span>
<a href="#">圖像優(yōu)化</a>
<a href="#">收藏夾</a>
<a href="#">郵件</a>
<a href="#">密碼</a>
<a href="#">梯度圖像</a>
</div>
<div class="collapsed">
<span class="menuspan">支持我們</span>
<a href="#">推薦我們</a>
<a href="#">聯(lián)系我們</a>
<a href="#">網(wǎng)絡(luò)資源</a>
</div>
<div class="collapsed">
<span class="menuspan">合作伙伴</span>
<a href="#">javascript工具包</a>
<a href="#">css浮動(dòng)</a>
<a href="#">condingforums</a>
<a href="#">css例子</a>
</div>
<div class="collapsed">
<span class="menuspan">測(cè)試電流</span>
<a href="#">高壓電1</a>
<a href="#">高壓電2</a>
<a href="#">高壓電3</a>
</div>
</div>
</body>
</html>
??上面的代碼實(shí)現(xiàn)了折疊層級(jí)菜單的功能，共有四個(gè)主菜單恶复，每個(gè)菜單下又隱藏若干子菜單怜森，當(dāng)單擊某個(gè)菜單時(shí)會(huì)打開該菜單下面的子菜單，再次單擊該菜單會(huì)隱藏下面的子菜單谤牡，還有就是菜單之間是互斥的副硅，即打開一個(gè)菜單會(huì)關(guān)閉其他的菜單。最終效果如下所示：
最后
??對(duì)于折疊層級(jí)菜單翅萤，網(wǎng)上的很多帖子都是使用 jQuery庫(kù)來實(shí)現(xiàn)恐疲，而本貼使用的是原生JavaScript+css結(jié)合雙重for手段來具體實(shí)現(xiàn)。emm套么，今天就分享到這里了培己。
