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

最新推荐文章于 2024-10-16 16:26:58 发布

UPC_思念

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量137

点赞数

文章标签： xhtml javascript ViewUI

<!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>