基于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 相关文章推荐
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
ios中视频的最后一桢问题解决
May 14 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
中东人咖啡哲学
2021/03/03 咖啡文化
PHP安全配置
2006/12/06 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
JavaScript 继承的实现
2009/07/09 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
django删除表重建的实现方法
2019/08/28 Python
python 实现dict转json并保存文件
2019/12/05 Python
python实现超级玛丽游戏
2020/03/18 Python
python3.5的包存放的具体路径
2020/08/16 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
信用社员工先进事迹材料
2014/02/04 职场文书
在人间读书笔记
2015/06/30 职场文书
订货会主持词
2015/07/01 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书