★JS点击展开收缩的简洁手风琴菜单(折叠多栏/仅展一项)★

一款竖直的JS折叠菜单代码，点击展开和收缩，总是显示一个菜单项，又称为“手风琴”菜单。转自烈火网，@笑忘书 修改

添加多栏菜单：<div class="menutitle" onclick="SwitchMenu('sub此处填一个正整数')">菜单栏名称</div><span class="submenu" id="sub此处填一个正整数(同上)">隐藏内容</span>
★请按上面格式添加更多一栏菜单，注意"此处填一个正整数"应大于代码已存在的数值(即1,2)
<style type="text/css"> .menutitle{ cursor:pointer; margin:5px 2px; background:#222; color:#fff; padding:5px 3px; text-align:center; font-weight:bold; border:2px solid #090; } .submenu{ background:#fff; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin:5px 5px; padding:5px 4px; color:#000; } </style> <script type="text/javascript"> if (document.getElementById){ document.write('<style type="text/css">\n'); document.write('.submenu{display: none;}\n'); document.write('</style>\n'); } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } </script> <div id="masterdiv"> <!-- 把菜单内容放在本区域 --> <div class="menutitle" onclick="SwitchMenu('sub1')">关于本站</div> <span class="submenu" id="sub1"> 笑忘书网页代码收藏馆 (35230.wodemo.com)，搜集精品网页代码，分享各类福利资源，欢迎光临本站浏览，你的支持是我分享的动力 </span> <div class="menutitle" onclick="SwitchMenu('sub2')">精彩资源</div> <span class="submenu" id="sub2"> <a href="http://35230.wodemo.com/entry/172658">我的磨精品装扮CSS教程</a><br> <a href="http://35230.wodemo.com/entry/273140">选择评价添至输入框的评论代码</a><br> <a href="http://35230.wodemo.com/entry/271996">关于笑忘书网页代码收藏馆</a> </span> <!-- 把菜单内容放在本区域 --> </div>