JavaScript制作的可折叠弹出式菜单示例

前端技术 2023/09/05 JavaScript
复制代码 代码如下:

<!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 {margin-bottom: 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;
function 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\";
}
else {
thisMenu.display = \"block\";
}
return false;
}
</script>
<body>
<h1>Shakespeare\'s Plays</h1>
<div>
<a href=\"menu1.html\" class=\"menuLink\">Comdeis</a>
<ul class=\"menu\" id=\"menu1\">
<li><a href=\"pg1.html\">All\'s Well That Ends Well</a></li>
<li><a href=\"pg2.html\">As You Like It</a></li>
<li><a href=\"pg3.html\">Love\'s Labour\'s Lost</a></li>
<li><a href=\"pg4.html\">The Comedy of Errors</a></li>
</ul>
</div>
<div>
<a href=\"menu2.html\" class=\"menuLink\">Tragedies</a>
<ul class=\"menu\" 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\" class=\"menuLink\">Histories</a>
<ul class=\"menu\" 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>

本文地址：https://www.stayed.cn/item/12603

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案