基于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程序设计有所帮助。
-
本文向大家介绍java实现构造无限层级树形菜单，包括了java实现构造无限层级树形菜单的使用技巧和注意事项，需要的朋友参考一下 这里来讲一下后台java如何构造多叉树，这样前台就可接收到数据递归构造树形菜单了。 我们来理一下如何实现构造多叉树的逻辑吧，其实整个问题概括起来就是 1、构造一个实体类，用来存储节点，所以我们构造的需要四个对象（id，pid，name，和chirenList） 2、构造菜
-
本文向大家介绍Vue.js组件tree实现无限级树形菜单，包括了Vue.js组件tree实现无限级树形菜单的使用技巧和注意事项，需要的朋友参考一下 分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。 代码看这里喽: html代码: js代码: 效果图： 本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。 关于vue.js组件的教程
-
本文向大家介绍基于jquery实现多级菜单效果，包括了基于jquery实现多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现多级菜单效果展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍基于jquery实现三级下拉菜单，包括了基于jquery实现三级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery三级下拉菜单的具体实现代码，供大家参考，具体内容如下 在写这个的时候，首先要捋顺思路。点一个菜单的时候，其他的要闭合，点一级菜单的时候，二三级菜单要闭合，等等。 大致代码如下： 如果要添加样式的话，一定要注意，否则菜单可能会出现错误。 完整
-
本文向大家介绍基于jQuery实现二级下拉菜单效果，包括了基于jQuery实现二级下拉菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的，当然还有更为复杂的二级菜单，不过先学会如何制作简单的，分享给大家供大家参考，具体内容如下 代码如下： 希望本文所述对大家学习jquery程序设计有所帮助。
-
本文向大家介绍JS实现无限级网页折叠菜单(类似树形菜单)效果代码，包括了JS实现无限级网页折叠菜单(类似树形菜单)效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码。分享给大家供大家参考。具体如下： 这是一款超不错的网页折叠菜单，采用JavaScript实现。折叠菜单是大家比较常见到的一种菜单形式，可广泛应用于管理系统、后台左侧、产品
-
pre { white-space: pre-wrap; } 树形网格（TreeGrid）组件从数据网格（DataGrid）继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格（DataGrid），可以用在树形网格（TreeGrid）中。为了使用树形网格（TreeGrid），用户必须定义 'treeField' 属性，指明哪个字段作为树节点。 本教程将向您展示如何使用树形网格（Tree
-
本文向大家介绍jQuery实现的无限级下拉菜单功能示例，包括了jQuery实现的无限级下拉菜单功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的无限级下拉菜单功能。分享给大家供大家参考，具体如下： 运行效果图如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总