js無限級折疊菜單精簡版

更新時間：2011年03月17日 23:32:41 作者：

一個簡單的js無限級折疊菜單，這里只列出JS版本的，JQUERY版本的可以到作者發(fā)的帖子上看，權當拋磚引玉了。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>無限級折疊菜單 1.01 JS版</title> <meta name="keywords" content="hj1227 原創(chuàng)無限級折疊菜單 1.01js版"> <meta name="description" content="hj1227 原創(chuàng)無限級折疊菜單 1.01js版"> <style>  </style> </head> <body> <div class="wppm3vysvbp" id="menu"> <h3>無限級折疊菜單 1.0.1 JS版</h3> <ul> <li><a href='javascript:void(0);'>菜單_1_1</a> <ul> <li><a href='javascript:void(0);'>菜單_2_1</a> <ul> <li><a href='javascript:void(0);'>菜單_3_1</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_3_2</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_2_2</a> <ul> <li><a href='javascript:void(0);'>菜單_3_1</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_3_2</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_1_2</a> <ul> <li><a href='javascript:void(0);'>菜單_2_1</a> <ul> <li><a href='javascript:void(0);'>菜單_3_1</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_3_2</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_2_2</a> <ul> <li><a href='javascript:void(0);'>菜單_3_1</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_3_2</a> <ul> <li><a href='javascript:void(0);'>菜單_4_1</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> <li id='end'><a href='javascript:void(0);'>菜單_4_2</a> <ul> <li><a href='javascript:void(0);'>菜單_5_1</a></li> <li id='end'><a href='javascript:void(0);'>菜單_5_2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

在線演示 http://demo.jb51.net/js/2011/caidan/index.htm

您可能感興趣的文章: