简易二级下拉菜单

主要构架思路：

1、隐藏方式：利用父元素高度使其隐藏和显现

2、实现过程：点击某一列菜单，然后改变其高度，使下面的内容显示

3、使用js方法：toggleClass（父元素 ，“类名”）

<--! 在初学js时尽量使用改变类名的方法使其状态的改变，这样是为了做到样式与内容的分离 -->

注意：使用这个方法需要引进一个tools.js，我的另一篇就是这个js的源码。希望一起进步，我也是初学者

html代码：

<div id="my_menu" class="sdmenu">

<div>

<span class="menuSpan">在线工具</span>

<a href="#">图像优化</a>

<a href="#">收藏夹图标生成器</a>

<a href="#">邮件</a>

<a href="#">htaccess密码</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="#">CodingForums</a>

<a href="#">CSS例子</a>

</div>

<div class="collapsed">

<span class="menuSpan">测试电流</span>

<a href="#">Current or not</a>

<a href="#">Current or not</a>

<a href="#">Current or not</a>

<a href="#">Current or not</a>

</div>

</div>

CSS代码：

@charset "utf-8";

/* sdmenu */

div.sdmenu {

width: 150px;

margin: 0 auto;

font-family: Arial, sans-serif;

font-size: 12px;

padding-bottom: 10px;

background: url(bottom.gif) no-repeat right bottom;

color: #fff;

}

div.sdmenu div {

background: url(title.gif) repeat-x;

overflow: hidden;

}

div.sdmenu div:first-child {

background: url(toptitle.gif) no-repeat;

}

div.sdmenu div.collapsed {

height: 25px;

}

div.sdmenu div span {

display: block;

height: 15px;

line-height: 15px;

overflow: hidden;

padding: 5px 25px;

font-weight: bold;

color: white;

background: url(expanded.gif) no-repeat 10px center;

cursor: pointer;

border-bottom: 1px solid #ddd;

}

div.sdmenu div.collapsed span {

background-image: url(collapsed.gif);

}

div.sdmenu div a {

padding: 5px 10px;

background: #eee;

display: block;

border-bottom: 1px solid #ddd;

color: #066;

}

div.sdmenu div a.current {

background: #ccc;

}

div.sdmenu div a:hover {

background: #066 url(linkarrow.gif) no-repeat right center;

color: #fff;

text-decoration: none;

}

js代码：

var menuSpan = document.querySelectorAll('.menuSpan');
//获取html中的显示节点

for(var i = 0 ; i <= menuSpan.length ; i++){

menuSpan[i].onclick = function(){

var parentDiv = this.parentNode;
//获取节点的父元素
toggleClass(parentDiv,"collapsed");
//改变父元素的类名实现改变其css样式
}}};