基于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 页面自动加载事件详解
Feb 10 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
Jquery ajax基础教程
Nov 20 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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实现分页的一个示例
2006/10/09 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python 判断自定义对象类型
2009/03/21 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python获取地震信息 微信实时推送
2019/06/18 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
招聘与培训专员岗位职责
2014/01/30 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
python画条形图的具体代码
2022/04/20 Python