基于jquery实现无限级树形菜单


Posted in Javascript onMarch 22, 2016

本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下

效果图:

基于jquery实现无限级树形菜单

实现代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无限级树形菜单</title>
</head>
<script src="jquery.min.js"></script>
<style>
ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;}
ul.a li{list-style-type:none;cursor:pointer;background:#fff;padding:5px 10px;color:black;width:90%;display:none}
.treelist{width:222px;}
ul.a div{height:34px;width:100%;background:url(jia.jpg) no-repeat;padding-left:27px;padding-top:6px;color:#333333;font-weight:bold;font-size:15px}
.shows{display:block}
</style>
<body>
 
<div class="treelist">
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>
    <ul class="a">
    <div>ccccc</div>
      <li>xxxx</li>
      <li>xxxx</li>
      <li>
        <ul class="a">
        <div>ccccc</div>
          <li>
            <ul class="a">
              <div>ccccc</div>
              <li>xxxx</li>
              <li>xxxx</li>
              <li>xxxx</li>
              <li>xxxx</li>
            </ul>
          </li>
          <li>xxxx</li>
          <li>xxxx</li>
          <li>xxxx</li>
        </ul>
      </li>
      <li>xxxx</li>
    </ul>
  </li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
 
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
 
<ul class="a">
<div>ccccc</div>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
  <li>xxxx</li>
</ul>
</div>
 
 
 
<script>
/*
$(".a div").each(function(i){
  var w=$(this).parents("li").width();
  $(this).css("width",w-100+"px");
})
*/
 
$(".a").click(function(){
  $(this).find("li").click(function(event){
    return false
  })
   
  if($(this).hasClass("shows")){
    $(this).removeClass("shows");
    $(this).find("li").find("ul").removeClass("shows");
    $(this).find("li").hide();
    $(this).find("div").css("background","url(jia.jpg) no-repeat");
     
     
  }else{
    $(this).addClass("shows");
    $(this).find("li").show();
    $(this).find("li").find("ul").find("li").hide();
    $(this).show();
    $(this).find("div").eq(0).css("background","url(jian.jpg) no-repeat"); 
  }
   
})
</script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
Aug 05 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
javascript的几种继承方法介绍
Mar 22 #Javascript
基于javascript实现文字无缝滚动效果
Mar 22 #Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 #Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 #Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 #Javascript
jQuery toggle 代替方法
Mar 22 #Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JavaScript延迟加载
2021/03/09 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
单位门卫岗位职责
2013/12/20 职场文书
老乡聚会通知
2015/04/23 职场文书
少年雷锋观后感
2015/06/10 职场文书