• 用Jquery去写树结构


    <!DOCTYPEhtml>
    
    <html>
    
    <head>
    
    <metacharset="utf-8">
    
    <title>Tree Menu</title>
    
    </head>
    
    <body>
    
      <divclass="lmenu">
    
        <ul>
    
          <liaid="26">
    
            <span> <emclass="icoopen"></em>
    
              一级标题
    
            </span>
    
            <ulstyle="display: none;">
    
              <liaid="27"> <emclass="iconleaf"></em>
    
                二级标题
    
              </li>
    
              <liaid="28">
    
                <emclass="iconleaf"></em>
    
                二级标题
    
              </li>
    
              <liaid="29">
    
                <emclass="iconleaf"></em>
    
                二级标题
    
              </li>
    
            </ul>
    
          </li>
    
          <liaid="1">
    
            <span>
    
              <emclass="icoclose"></em>
    
              一级标题
    
            </span>
    
            <ulstyle="display: block;">
    
              <liaid="4">
    
                <emclass="iconleaf"></em>
    
                二级标题
    
              </li>
    
              <liaid="2">
    
                <emclass="iconleaf"></em>
    
                二级标题
    
              </li>
    
              <liaid="8">
    
                <span>
    
                  <emclass="icoclose2"></em>
    
                  二级标题
    
                </span>
    
                <ul>
    
                  <liaid="10">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="3">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                </ul>
    
              </li>
    
              <liaid="5">
    
                <span>
    
                  <emclass="icoclose2"></em>
    
                  二级标题
    
                </span>
    
                <ul>
    
                  <liaid="7">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="6">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                </ul>
    
              </li>
    
            </ul>
    
          </li>
    
          <liaid="11">
    
            <span>
    
              <emclass="icoclose"></em>
    
             一级标题
    
            </span>
    
            <ul>
    
              <liaid="17">
    
                <span>
    
                  <emclass="icoclose2"></em>
    
                  二级标题
    
                </span>
    
                <ul>
    
                  <liaid="25">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="23">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="22">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                </ul>
    
              </li>
    
              <liaid="12">
    
                <span>
    
                  <emclass="icoclose2"></em>
    
                  二级标题
    
                </span>
    
                <ul>
    
                  <liaid="15">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="16">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                  <liaid="14">
    
                    <emclass="iconleaf2"></em>
    
                    三级标题
    
                  </li>
    
                </ul>
    
              </li>
    
            </ul>
    
          </li>
    
        </ul>
    
      </div>
    
      <style>
    
    *{
    
    margin: 0;
    
    padding: 0;
    
      }
    
    .icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenuullispan ,.search-sidebutton{background: url("doc.png") no-repeat00;width: 9px;height: 9px;top: 9px;}
    
    .lmenuli{list-style: none;}
    
    .lmenuem {display: block;position: absolute;cursor: pointer;}
    
    .icoopen{left: 28px;background-position: 0-39px;}
    
    .icoopen2{left: 42px;background-position: -46px-88px;}
    
    .icoclose{left: 28px;background-position: -45px-39px;}
    
    .icoclose2{left: 42px;background-position: 0-88px;}
    
    .iconleaf , .iconleaf2{width: 3px;height: 5px;background-position: -87px-41px;}
    
    .iconleaf {left: 47px;top: 11px;}
    
    .iconleaf2 {left: 72px;top: 10px;}
    
    .search-side{
    
    width: 250px;
    
    border-radius: 5px;
    
    position: relative;
    
    background-color: #FFFFFF;
    
    border: 1pxsolid#ddd;
    
    height: 36px;
    
    line-height: 36px;
    
      }
    
    .search-sidebutton{
    
    background-position: 00;
    
    border: 0none;
    
    cursor: pointer;
    
    display: block;
    
    height: 16px;
    
    width: 16px;
    
    position: relative;
    
    left: 11px;
    
      }
    
    .search-boxinput{
    
    position: absolute;
    
    top: 11px;
    
    background-color: transparent;
    
    border: mediumnone;
    
    color: #AFB0B0;
    
    height: 16px;
    
    margin-left: 37px;
    
    outline: mediumnone;
    
    width: 200px;
    
      }
    
    .lmenu{
    
    width: 250px;
    
    height: auto;
    
    overflow: hidden;
    
    font-family: "宋体",Tahoma, Helvetica, "Microsoft Yahei", "微软雅黑", Arial, STHeiti;
    
    margin-bottom: 10px;
    
    border: 1pxsolid#ddd;
    
    border-radius: 5px;
    
      }
    
    .lmenuulli{
    
    position: relative;
    
    cursor: pointer;
    
      }
    
    .lmenuulliul{
    
    max-height: 350px;
    
    overflow: auto;
    
      }
    
    .lmenuulliulliul{
    
    height: auto;
    
      }
    
    .lmenuullispan{
    
    display: block;
    
    width: 100%;
    
    height: 28px;
    
    line-height: 28px;
    
    text-indent: 3em;
    
    /*font-weight: bolder;*/
    
    font-size: 14px;
    
    color: #0E3E5E;
    
    border-bottom: 1pxsolid#D7D7D7;
    
    background-position: -46px0;
    
      }
    
    .lmenuulliulli , .lmenuulliullispan{
    
    /*background-color: #F7F8F8;*/
    
    background-color: #FFFFFF;
    
    color: #333;
    
    text-indent: 5em;
    
    font-size: 13px;
    
    height: auto;
    
    line-height: 28px;
    
      }
    
    .lmenuulliullispan{
    
    background:none;
    
      }
    
    .lmenuulliulliulli{
    
    border:none;
    
    text-indent: 7em;
    
    font-size: 12px;
    
    font-weight: normal;
    
    height: 24px;
    
    line-height: 24px;
    
      }
    
      </style>
    
      <scripttype="text/javascript"src="jquery-3.2.1.js"></script>
    
      <script>
    
    $(function() {
    
    loadMenu(function (id){
    
    // window.location= "";此处指定关于aid的链接
    
            });
    
          });
    
    /*传入一个函数参数为 id 即li上的属性 aid*/
    
    functionloadMenu (fun_clickAction) {
    
    /*事件回调函数*/
    
          clickAction = fun_clickAction;
    
    /*一级菜单的样式*/
    
    $(".lmenu > ul > li > span").prepend('<em class="icoclose"></em>');
    
    /*二级菜单的样式*/
    
    $(".lmenu > ul > li > ul > li").each(function(){
    
    /*检查是否有节点*/
    
            span =$(this).find("span"); 
    
    if ( span.length ){
    
    //有节点的话
    
              span.prepend('<em class="icoclose2"></em>');
    
            }else{
    
    //无节点的话,绑定事件
    
    $(this).prepend('<em class="iconleaf"></em>')
    
                   .click(function(){
    
    clickAction($(this).attr('aid'));
    
                   });
    
            }
    
          });
    
    /*三级菜单的样式*/
    
    $(".lmenu > ul > li > ul > li > ul > li")
    
            .prepend('<em class="iconleaf2"></em>')
    
            .click(function(){
    
    clickAction($(this).attr('aid'));
    
            });
    
    $(".lmenu ul li span").click(function(){
    
    var ye =$(this).find('em');
    
            classNama = ye.attr("class");
    
    if( classNama =='icoclose'){ye.attr('class','icoopen');}
    
    elseif( classNama =='icoopen' ){ye.attr('class','icoclose');}
    
    elseif( classNama =='icoclose2'){ye.attr('class','icoopen2');}
    
    elseif( classNama =='icoopen2' ){ye.attr('class','icoclose2');}
    
    $(this).siblings("ul").slideToggle("normal","swing");
    
          });
    
        }
    
      </script>
    
    </body>
    
    </html>
    学而不用则罔 用而不学则殆
  • 相关阅读:
    Google pagespeed优化首页加载速度详解
    juqery 学习之三 选择器<子元素><表单>
    juqery 学习之五 文档处理<包裹、替换、删除、复制>
    juqery 学习之四 筛选<过滤>
    关于鼠标点击其他地方隐藏层的实例(要引入jquery包哦)
    JAVASCRIPT 对象 用法(offset screen scroll client)
    [分享]NopCommerce支付插件开发步骤(页 1) 扩展开发
    juqery 学习之五 文档处理<插入>
    juqery 学习之六 CSS<css、位置、宽高>
    th scope="row"和th scope="col"什么意思??
  • 原文地址:https://www.cnblogs.com/songyifan427/p/9952915.html
Copyright © 2020-2023  润新知