上面是效果图片。
html
代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.111cn.net> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> body{ font-size: 12px;} h2,h3{ margin: 0;} ul{ margin: 0; padding: 0; list-style: none; } #outer_wrap li{ padding-left: 30px; line-height: 24px;} .controlSymbol{ padding: 0 5px; border: 1px solid #adff2f; cursor: pointer;} </style> </head> <body> <ul id="outer_wrap"> <li> <h2>标题1</h2> <ul> <li>内容1</li> <li>内容2</li> <li>内容3</li> <li>内容4</li> <li> <h3>标题1_1</h3> <ul> <li>内容1_1</li> <li>内容1_2</li> <li>内容1_3</li> <li>内容1_4</li> </ul> </li> <li> <h3>标题1_2</h3> <ul> <li>内容1_1</li> <li>内容1_2</li> <li>内容1_3</li> <li>内容1_4</li> </ul> </li> </ul> </li> </ul> </body> </html> 下面保存成js文件 var innerText = document.innerText ? 'innerText' : 'textContent'; function $(id){ |
文章很简单吧,有需要的朋友可以看看这款js树形菜单效果