HTML簡單的折疊菜單實現


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>div{font-size:12px;color:red; background-color: #EAEAE8; border: 1 solid #1892B5; padding: 1}</style>
</head>

<body>
<div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all.child1.style.display =='none')?'':'none'" >
+ 主目錄1</div>
<div id="child1" style="display:none">
<a href="#">- 子目錄1</a> <br>
<a href="#">- 子目錄2</a> <br>
<a href="#">- 子目錄3</a> <br>
<a href="#">- 子目錄4</a>
</div>
<div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all.child2.style.display =='none')?'':'none'" >
+ 主目錄2 </div>
<div id="child2" style="display:none">
<a href="#">- 子目錄1</a> <br>
<a href="#">- 子目錄2</a> <br>
<a href="#">- 子目錄3</a>
</div>

</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM