复制代码代码如下：
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>可折叠弹出式菜单</title>
</head>
<style>
body {background-color：#fff; color：＃000;}
div {マージンボトム：10px;}
ul.menu {display：none; list-style-type：none; margin-top：5px;}
a.menulink {font-size：16px; font-weight：bold;}
</style>
<script type = "text/javascript">
window.onload = initall;
関数initall（）{
var alllinks = document.getElementsByTagname（ "a"）;
for（var i = 0; i <alllinks.length; i ++）{
if（alllinks [i] .classname.indexof（ "menulink"）> -1）{
alllinks [i] .onclick = togglemenu;
}
}
}
function togglemenu（）{
var startmenu = this.href.lastindexof（ "/"）+1;
var stopmenu = this.href.lastindexof（ "。"）;
var thismenuname = this.href.substring（startmenu、stopmenu）;
var thismenu = document.getElementById（thismenuname）.style;
if（thismenu.display == "block"）{
thismenu.display = "none";
}
それ以外 {
thismenu.display = "block";
}
falseを返します。
}
</script>
<body>
<h1>シェークスピアの演劇</h1>
<div>
<a href = "menu1.html"> comdeis </a>
<ul id = "menu1">
<li> <a href = "pg1.html">すべてがうまく終わる</a> </li>
<li> <a href = "pg2.html">好きなように</a> </li>
<li> <a href = "pg3.html"> Love's Labor's Lost </a> </li>
<li> <a href = "pg4.html">エラーのコメディ</a> </li>
</ul>
</div>
<div>
<a href = "menu2.html">悲劇</a>
<ul id = "menu2">
<li> <a href = "pg5.html"> anthony＆cleopatra </a> </li>
<li> <a href = "pg6.html"> hamlet </a> </li>
<li> <a href = "pg7.html"> romeo＆juliet </a> </li>
</ul>
</div>
<div>
<a href = "menu3.html"> histories </a>
<ul id = "menu3">
<li> <a href = "pg8.html"> Henry IV、part1 </a> </li>
<li> <a href = "pg9.html"> Henry IV、part2 </a> </li>
</ul>
</div>
</body>
</html>