文章预览
前言
今天来跟大家分享一下如何制作一个网页中的左侧菜单，这个功能对于网页来说也是常用的功能之一，相当于书签一样的功能。那么今天我们就来说一说如何实现一个折叠层级菜单的功能。
那么折叠层级菜单长什么样？下面我们来直观的看一下，如下图所示就是一个简单的层级菜单，共有四个菜单选项，选择哪一个选项就对应地菜单下面相应的内容，如下截图所示：
那么对于这样的层级菜单如何实现呢？用原生的javascript+css就可以来实现，而且实现起来也不是很难，这里主要是通过用css对菜单定义两种状态，一个用于折叠时显示，另一个用于展开时显示，而这两个状态的切换则使用JavaScript的单击响应函数来完成。在用JavaScript做状态切换时，我这里使用的是排他思想，也就当前点击的菜单是一种状态，其他的都是另一种状态，而实现排他思想的手段则是双重for循环和自定义属性。下面来看一下具体如何实现吧，具体代码如下：
<html>
<head>
<title>折叠层级菜单</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="#">图像优化</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="#">联系我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuspan">合作伙伴</span>
<a href="#">javascript工具包</a>
<a href="#">css浮动</a>
<a href="#">condingforums</a>
<a href="#">css例子</a>
</div>
<div class="collapsed">
<span class="menuspan">测试电流</span>
<a href="#">高压电1</a>
<a href="#">高压电2</a>
<a href="#">高压电3</a>
</div>
</div>
</body>
</html>
上面的代码实现了折叠层级菜单的功能，共有四个主菜单，每个菜单下又隐藏若干子菜单，当单击某个菜单时会打开该菜单下面的子菜单，再次单击该菜单会隐藏下面的子菜单，还有就是菜单之间是互斥的，即打开一个菜单会关闭其他的菜单。最终效果如下所示：
最后
对于折叠层级菜单，网上的很多帖子都是使用 jQuery库来实现，而本贴使用的是原生JavaScript+css结合双重for手段来具体实现。emm，今天就分享到这里了。
………………………………
