jquery学习笔记(四)-----jquery实现二级树状菜单

zxingchao2005

浏览: 80453 次
性别:
来自: 北京

最近访客更多访客>>

linchers

xuewei97

xinger666

kanpiaoxue

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (83)

社区版块

存档分类

<!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>jquery二级树形菜单</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin: 50px; font-family: Arial, Helvetica, sans-serif; } ul { margin: 0; padding: 0; } li { list-style: none; } #menuTree { background-color: #e5e5e5; width: 180px; } #menuTree h3 { background-color: #aaa; margin: 0; padding: 4px; font-size: 12px; cursor: pointer; border-bottom: solid 1px #999; } #menuTree ul { margin: 6px 12px; font-size: 11px; } #menuTree div { display: none; } #menuTree h3.blue { background: #069; color: #fff; }</style> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { margin: 50px; font-family: Arial, Helvetica, sans-serif; } ul { margin: 0; padding: 0; } li { list-style: none; } #menuTree { background-color: #e5e5e5; width: 180px; } #menuTree h3 { background-color: #aaa; margin: 0; padding: 4px; font-size: 12px; cursor: pointer; border-bottom: solid 1px #999; } #menuTree ul { margin: 6px 12px; font-size: 11px; } #menuTree div { display: none; } #menuTree h3.blue { background: #069; color: #fff; }</style> <mce:script type="text/javascript" src="./js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <ul id="menuTree"> <li> <h3> mainMenu 1 </h3> <div> <ul> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a> </li> </ul> </div> </li> <li> <h3> mainMenu 2 </h3> <div> <ul> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a> </li> </ul> </div> </li> <li> <h3> mainMenu 3 </h3> <div> <ul> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a> </li> <li> <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a> </li> </ul> </div> </li> </ul> </body> </html>

分享到：