左侧树形伸缩分类菜单

这个比较多,dtree什么的,很多工具

解决方案 »

  1.   

    好像struts2标签本身就有tree标签,你可以去看看
      

  2.   

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HTML+CSS结构鼠标点击折叠展开折叠式菜单_懒人建站</title><style type="text/css">
    dl,dt,dd,h5,p{
    padding:0px;
    margin:0px;
    font-size:10pt;}
    dl{
    width:80%;
    height:auto;
    display:block;
    overflow:hidden;
    margin:0 auto;
    font-size:10pt;
    line-height:160%;}
    dt,dt a{
     width:100%;
     height:auto;
     display:block;
     font-weight: bold;
     color:#333;
     font-size:10.5pt;
     cursor:pointer;
     text-decoration: none;
    }
    dt a:hover{
     text-decoration: underline;
     color: #FF0000;
    }
    dd,p{
     text-indent: 2em;
    }
    </style>
    </head><body>
    <script>
    var number=3; function LMYC() {
    var lbmc;
        for (i=1;i<=number;i++) {
            lbmc = eval('LM' + i);
            lbmc.style.display = 'none';
        }
    }
     
    function ShowFLT(i) {
        lbmc = eval('LM' + i);
        if (lbmc.style.display == 'none') {
            LMYC();
            lbmc.style.display = '';
        }
        else {
            lbmc.style.display = 'none';
        }
    }
    </script>
            <dl>
             <dt onClick=javascript:ShowFLT(1) href="javascript:void(null)"><a href="javascript:;">第1章 管理要求</a></dt>
              <dd id=LM1 style="DISPLAY: none">
              <ul>
    <li>1.1 食品安全管理领导小组</li>
    <li>1.2 沟通</li>
    <li>1.3 文件控制</li>
    </ul>
             </dd>
            <dt onClick=javascript:ShowFLT(2) href="javascript:void(null)"><a href="javascript:;">第2章 前提方案（PRRS）</a></dt>
              <dd id=LM2 style="DISPLAY: none">
              <ul>
    <li>2.1 前提方案总则</li>
    <li>2.2 人员食品安全管理</li>
    <li>2.3 建筑物语设施</li>
    </ul>
            </dd>
           <dt onClick=javascript:ShowFLT(3) href="javascript:void(null)"><a href="javascript:;">第3章 卫生标准操作程序（SSOP）</a></dt>
              <dd id=LM3 style="DISPLAY: none">
              <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
            </dd>        
            </dl>
            
            
         </body>
    </html>