基于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 相关文章推荐
微信JS接口汇总及使用详解
Jan 09 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
Vue实现购物车功能
Apr 27 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
微信小程序实现图片上传
May 23 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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实现C#山寨ArrayList的方法
2015/07/16 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
javascript 数组排序函数
2009/08/20 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
node.js中watch机制详解
2014/11/17 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
js实现登录验证码
2016/12/22 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
vuex入门最详细整理
2020/03/04 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
js数组的基本使用总结
2021/01/18 Javascript
python设置检查点简单实现代码
2014/07/01 Python
python:socket传输大文件示例
2017/01/18 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python多线程http压力测试脚本
2019/06/25 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
销售简历自我评价
2014/01/24 职场文书
小班幼儿评语大全
2014/04/30 职场文书
国旗下演讲稿
2014/05/08 职场文书
争先创优活动总结
2014/08/27 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS