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

用Jquery去写树结构的更多相关文章

Jquery 随便写些知识点
针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...
用node.js从零开始去写一个简单的爬虫
如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...
JQuery去实现校验用户名
JQuery 是什么? javascript 的代码框架. 有什么用? 简化代码,提高效率. 核心 write less do more , 写得更少,做的更多. load //找到这个元素, 去执行 ...
如果简单的记录,就可以为这个世界创造更多的财富,那么还有什么理由不去写博客呢? — 读<<黑客与画家>> 有感
上一次博文发文时间是2016.1.15,7个月已经过去了.最近读了一本<>的书,对我触动挺大的!里面有关于技术趋势的探讨,也有关于人生和财富的思考! 开始更新iOS122的文章的初衷是,聚 ...
【转载】这样去写你的HTML
昨天在 twitter 上说,怎么忍心把页面写得这么难用?是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢.比如那些需要读屏软件的用户.作为一个前端,我们又怎么会忍心呢. ...
***使用jQuery去封装插件（组件化、模块化的思想），即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
如何在嵌套的app中运用vue去写单页面H5
本文主要介绍移动端.为了避免移动端兼容出现各种奇奇怪怪的bug,所以秉承着能不用复杂的语法就不用,尽量用最基础的语法. 可用惯了各种ES6语法的童鞋们,写原生真是头疼,再加上各种领导催工期,肯定是内心 ...
jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
首先我们看两个连写注释第一个: /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...
jquery 手写一个简单浮窗的反面教材
前言初学jquery写的代码,陈年往事回忆一下. 正文介绍一下大体思路思路: 1.需要控制一块区域,这块区域一开始是隐藏的. 2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...

随机推荐

ifconfig-dropped
drop的包是因为网卡的buffer满了查看当前网卡的buffer size情况 ethtool -g eth0 Ring parameters for eth0: Pre-set maximums ...
error: failed to push some refs to 'https://github.com/username/python.git'
解决error: failed to push some refs to 'https://github.com/bluepen/python.git' 当我们在使用git工具上传我们自己的代码时,可 ...
Docker学习--Linux基础准备篇
1.docker命令不需要附带敲sudo的解决办法由于docker daemon需要绑定到主机的Unix socket而不是普通的TCP端口,而Unix socket的属主为root用户,所以其他用 ...
剑指offer五十之数组中重复的数字
一.题目在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...
Java学习之路(十二)：IO流<二>
字符流字符流是可以直接读写字符的IO流使用字符流从文件中读取字符的时候,需要先读取到字节数据,让后在转换为字符使用字符流向文件中写入字符时,需要把字符转为字节在写入文件 Reader和Write ...
Android 开发工具类 22_PullPersonService
PULL 解析 XML import java.io.InputStream; import java.io.OutputStream; import java.util.ArrayList; imp ...
APP 渠道推广【摘自网络】
渠道的合作方式无非三种,一种是付费合作,那很简单,谈好价格付钱.第二种是免费,主要是就是首发,还有就是跟渠道的运营小伙伴搞好关系让帮忙给个免费的位置等,第三种是活动奖品合作,简而言之,就是渠道商会逢年 ...
Gen中的switch分析及lookupswitch与tableswitch指令
int chooseNear(int i) { switch (i) { case 0: return 0; case 1: return 1; case 2: return 2; default: ...
Chapter 5. Conversions and Promotions
JLS解读:https://docs.oracle.com/javase/specs/jls/se7/html/jls-5.html 基本数据类型的转换 1) boolean不可以转换为其他的数据类型 ...
C#中的Dictionary类，默认key是区分大小写的
在C#中定义一个Dictionary Dictionary<string,string> dictionary = new Dictionary<string,string>( ...

用Jquery去写树结构

用Jquery去写树结构的更多相关文章

随机推荐

热门专题