js实现图层内容折叠展开显示特效，点击标题后展开图层下面的内容，再次点击隐藏起来，可根据自己的需求来自定义。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<TITLE>js+css制作图层内容折叠效果_武鸣人</TITLE>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
actuator.parentNode.style.backgroundImage = "url()";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url()" : "url()";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
window.onload = function() {
initializeMenu("productsMenu_wuming", "productsActuator_wuming");
initializeMenu("newPhonesMenu", "newPhonesActuator");
initializeMenu("compareMenu", "compareActuator");
}
</script>
<style>
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#menu_wwwwumingren {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
width: 203px;
}
#menulist_wuming {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar_wuming {
background: url() no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url() no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="menu_wwwwumingren">
<ul id="menulist_wuming">
<li class="menubar_wuming">
<a href="#" id="productsActuator_wuming" class="actuator">武鸣人折叠菜单(点击这里)</a>
<ul id="productsMenu_wuming" class="menu">
<li>
<a href="#" id="newPhonesActuator" class="actuator">武鸣人一号菜单</a>
<ul id="newPhonesMenu" class="submenu">
<li><a href="https://www.wuming.ren">武鸣人三级菜单一</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单二</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单三</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单四</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单五</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单六</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单七</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单八</a></li>
</ul>
</li>
<li>
<a href="#" id="compareActuator" class="actuator">武鸣人二号菜单</a>
<ul id="compareMenu" class="submenu">
<li><a href="https://www.wuming.ren">武鸣人三级菜单一</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单二</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单三</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单四</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单五</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单六</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单七</a></li>
<li><a href="https://www.wuming.ren">武鸣人三级菜单八</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</HTML>本文来自武鸣人网站，转载请注明出处