javascript static tree menu implementation code_navigation menu

If anyone is interested, you can change it to dynamically loading data, or use jquery. The code will definitely be much less! I found that adding some css, this tree is very useful in static pages!

<style type="text/css"> .expand{ cursor:pointer; } .hide{ cursor:pointer; } </style> <h3> </h3>The definition list can also be turned into a tree: <dl id="tree"> <dt> </dt>Menu 1<dd> </dd>1.1 aaa<dd> </dd>1.2 bbb<dd> </dd>1.3 ccc<dt> </dt>Menu 2<dd> </dd>2.1 Hello<dd> <a href="http://www.baidu.com"></a>Hyperlink</dd> <dt> </dt>Menu 3<dd> <dl style="margin-top:2px; margin-bottom:2px;"> <dt> </dt>3.1<dd> <a href="http://news.baidu.com"></a>Baidu News</dd> <dd> <a href="http://news.sohu.com"></a>Sohu News</dd> <dt> </dt>3.2<dd> <a href="http://news.baidu.com"></a>Baidu News</dd> <dd> <a href="http://news.sohu.com"></a>Sohu News</dd> </dl> </dd> </dl>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]