脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery实现无限级树形菜单

基于jquery实现无限级树形菜单

 更新时间：2016年03月22日 15:40:04   作者：netshow-vip  
这篇文章主要为大家详细介绍了基于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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    这篇文章主要介绍了jQuery简单倒计时效果,结合完整实例形式分析了jQuery针对日期与时间的计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • jquery实现的下拉和收缩效果示例

    jquery实现的下拉和收缩效果示例

    下拉和收缩类似的效果应用非常的频繁，这篇文章主要介绍了jquery实现的下拉和收缩效果,需要的朋友可以参考下
    2014-08-08
  • jquery判断浏览器后退时候弹出消息的方法

    jquery判断浏览器后退时候弹出消息的方法

    本节主要介绍了jquery判断浏览器后退时候弹出消息 ,需要的朋友可以参考下
    2014-08-08
  • 在JQuery dialog里的服务器控件 事件失效问题

    在JQuery dialog里的服务器控件 事件失效问题

    今天遇到个问题，在dialog中放了服务器端的空间dropdownlist，但是写selectindexchange事件却怎么也触发不了，然后就在网上搜，终于看到有个哥们解决了这个问题，真的谢谢他。
    2010-12-12
  • jQuery的one()方法用法实例

    jQuery的one()方法用法实例

    这篇文章主要介绍了jQuery的one()方法用法,实例分析了one()方法的功能、定义及为匹配元素的特定事件绑定一个一次性的事件处理方法使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery+canvas实现简单的球体斜抛及颜色动态变换效果

    jQuery+canvas实现简单的球体斜抛及颜色动态变换效果

    这篇文章主要介绍了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果,通过jQuery+html5的canvas利用时间函数进行实时数学运算动态绘制抛物线图形的技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery中siblings()方法用法实例

    jQuery中siblings()方法用法实例

    这篇文章主要介绍了jQuery中siblings()方法用法,实例分析了siblings()方法的功能、定义及获取匹配元素集合中每一个元素的同辈元素的使用技巧,是进行元素筛选时非常实用的方法,需要的朋友可以参考下
    2015-01-01
  • jQuery中setTimeout的几种使用方法小结

    jQuery中setTimeout的几种使用方法小结

    jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.
    2013-04-04
  • jQuery利用DOM遍历实现商城结算系统实战

    jQuery利用DOM遍历实现商城结算系统实战

    这篇文章主要介绍了jQuery利用DOM遍历实现商城结算系统实战，文章围绕主题展开详细的内容介绍，具一定的参考价值，感兴趣的小伙伴可以参考一下
    2022-06-06
  • jQuery 源码分析笔记(5) jQuery.support

    jQuery 源码分析笔记(5) jQuery.support

    接下来是非常纠结的一个话题，也是所有JS库必须实现的一个功能：浏览器兼容性和为开发者屏蔽这些差异。
    2011-06-06

最新评论