jquery二级树形菜单

来源：互联网发布：js {} 编辑：程序博客网时间：2024/05/16 17:52
<!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><style type="text/css" >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>    <script type="text/javascript" src="js/jquery.js"></script>  <script type="text/javascript"><!--      $(document).ready(function(){          $("#menuTree h3").toggle(              function(){      $(this).addClass("blue");                $(this).next("div").show("normal");              },              function(){      $(this).removeClass("blue");                $(this).next("div").hide("normal");              }        );      })  // --></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>