基于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 相关文章推荐
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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中static静态变量的使用方法详解
2010/06/04 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
this和执行上下文实现代码
2010/07/01 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
在漏洞利用Python代码真的很爽
2007/08/26 Python
python实现ipsec开权限实例
2014/11/11 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python如何安装下载后的模块
2020/07/03 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
司机岗位职责
2013/11/15 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
淮海战役观后感
2015/06/11 职场文书
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android