基于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 相关文章推荐
Google 静态地图API实现代码
Nov 19 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
php和asp语法上的区别总结
2019/05/12 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
Python Web框架Tornado运行和部署
2020/10/19 Python
Python实现网站注册验证码生成类
2017/06/08 Python
对numpy中shape的深入理解
2018/06/15 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
初中生考试作弊检讨书
2014/12/14 职场文书
2015年预算员工作总结
2015/05/14 职场文书
周一给客户的问候语
2015/11/10 职场文书
python munch库的使用解析
2021/05/25 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android