基于jquery实现无限级树形菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于jquery实现无限级树形菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1867字，纯文字阅读大概需要3分钟。
内容图文
本文实例为大家分享了基于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实现无限级树形菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】