主要構架思路：
1哥童、隱藏方式：利用父元素高度使其隱藏和顯現(xiàn)
2、實現(xiàn)過程：點擊某一列菜單哼凯，然后改變其高度欲间，使下面的內(nèi)容顯示
3、使用js方法：toggleClass（父元素 断部，“類名”）
<--! 在初學js時盡量使用改變類名的方法使其狀態(tài)的改變猎贴，這樣是為了做到樣式與內(nèi)容的分離 -->
注意：使用這個方法需要引進一個tools.js，我的另一篇就是這個js的源碼蝴光。希望一起進步她渴，我也是初學者
html代碼：
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在線工具</span>
<a href="#">圖像優(yōu)化</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="#">網(wǎng)絡資源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驅(qū)動</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中的顯示節(jié)點
for(var i = 0 ; i <= menuSpan.length ; i++){
menuSpan[i].onclick = function(){
var parentDiv = this.parentNode;
//獲取節(jié)點的父元素
toggleClass(parentDiv,"collapsed");
//改變父元素的類名實現(xiàn)改變其css樣式
}}};
