JavaScript+CSS无限极分类效果完整实现方法


Posted in Javascript onDecember 22, 2015

本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法。分享给大家供大家参考,具体如下:

CSS样式:

a {text-decoration:none;}
a,a:visited {color:#000;background:inherit;}
body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;}
dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;}
dd {margin:0 0 0 15px;}
h4 {margin:0;padding:0;font-size:18px;text-align:center;}
p {margin:0;padding:0 0 0 18px;}
p a,p a:visited {color:#00f;background:inherit;}
/*CNLTreeMenu Start*/
.CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;}
.CNLTreeMenu ul {padding:0;}
.CNLTreeMenu li {list-style:none;padding:0;}
.Closed ul {display:none;}
.Child img.s {background:none;cursor:default;}
#CNLTreeMenu1 ul {margin:0 0 0 17px;}
#CNLTreeMenu1 img.s {width:20px;height:15px;}
#CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;}
#CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;}
#CNLTreeMenu2 ul {margin:0 0 0 17px;}
#CNLTreeMenu2 img.s {width:17px;height:15px;}
#CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;}
#CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;}
#CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;}
#CNLTreeMenu3 ul {margin:0 0 0 17px;}
#CNLTreeMenu3 img.s {width:34px;height:18px;}
#CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;}
#CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;}
/*CNLTreeMenu End*/
/*Temp CSS for View Demo*/
#CNLTreeMenu1,#CNLTreeMenu2,#CNLTreeMenu3 {float:left;width:249px;border:1px solid #99BEEF;background:#D2E4FC;color:inherit;margin:3px;padding:3px;}
#CNLTreeMenu1,#CNLTreeMenu2 {padding-bottom:15px;}
.ViewCode {
 clear:both;
 border:1px solid #FFB900;background:#FFFFCC;color:inherit;margin:3px;padding:3px;
}
.ViewCode h6 {color:#00f;}

JavaScript代码:

function Ob(o){
 var o=document.getElementById(o)?document.getElementById(o):o;
 return o;
}
function Hd(o) {
 Ob(o).style.display="none";
}
function Sw(o) {
 Ob(o).style.display="";
}
function ExCls(o,a,b,n){
 var o=Ob(o);
 for(i=0;i<n;i++) {o=o.parentNode;}
 o.className=o.className==a?b:a;
}
function CNLTreeMenu(id,TagName0) {
 this.id=id;
 this.TagName0=TagName0==""?"li":TagName0;
 this.AllNodes = Ob(this.id).getElementsByTagName(TagName0);
 this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) {
 this.ClassName0=ClassName0;
 this.ClassName1=ClassName1;
 this.ClassName2=ClassName2;
 this.ImgUrl=ImgUrl || "css/s.gif";
 this.ImgBlankA ="<img src=\""+this.ImgUrl+"\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />";
 this.ImgBlankB ="<img src=\""+this.ImgUrl+"\" class=\"s\" />";
 for (i=0;i<this.AllNodes.length;i++ ) {
  this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:"";
  this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML;
  }
 }
 this.SetNodes = function (n) {
 var sClsName=n==0?this.ClassName0:this.ClassName1;
 for (i=0;i<this.AllNodes.length;i++ ) {
  this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName;
 }
 }
}

HTML页面:

<!--CNLTreeMenu Start:-->
<div class="CNLTreeMenu" id="CNLTreeMenu1">
<h4>CNL Tree Menu1</h4>
<p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p>
<ul>
 <li class="Opened"><a href="https://3water.com">JB51.Net</a>
 <ul>
  <li><a href="#1">技术区</a>
   <ul>
    <li><a href="#">网页技术</a>
    <ul>
     <li class="Child"><a href="#">JavaScript</a></li><!--Child Node-->
     <li class="Child"><a href="#">HTML/XHTML/CSS</a></li>
     <li class="Child"><a href="#">Ajax</a></li>
     <li class="Child"><a href="#">网页制作工具</a></li>
     <li class="Child"><a href="#">设计/图形</a></li>
     <li class="Child"><a href="#">Flash/多媒体</a></li>
     <li class="Child"><a href="#">VML/Web3D</a></li>
    </ul></li><!--Sub Node 3-->
    <li><a href="#">Web编程</a>
    <ul>
     <li class="Child"><a href="#">Java</a></li><!--Child Node-->
     <li class="Child"><a href="#">.Net</a></li>
     <li class="Child"><a href="#">ASP/VBScript</a></li>
     <li class="Child"><a href="#">PHP</a></li>
     <li class="Child"><a href="#">Perl/Python</a></li>
     <li class="Child"><a href="#">Web综合/开源</a></li>
    </ul></li><!--Sub Node 3-->
    <li><a href="#">数据库</a>
    <ul>
     <li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node-->
     <li class="Child"><a href="#">MySQL/PostgreSQL</a></li>
     <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li>
    </ul></li><!--Sub Node 3-->
    <li><a href="#">服务器</a>
    <ul>
     <li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node-->
     <li class="Child"><a href="#">Unix/Linux/Apache</a></li>
     <li class="Child"><a href="#">应用服务器</a></li>
    </ul></li><!--Sub Node 3-->
   </ul></li><!--Sub Node 2-->
  <li><a href="#1">二级目录</a>
   <ul>
    <li><a href="#">三级目录</a>
    <ul>
     <li><a href="#">四级目录</a>
     <ul>
      <li><a href="#">五级目录</a>
      <ul>
       <li><a href="#"></a>
       <ul>
        <li><a href="#">第n级目录</a>
         <ul>
          <li class="Child"><a href="#">叶结点1</a></li><!--Child Node-->
          <li class="Child"><a href="#">叶结点2</a></li>
          <li class="Child"><a href="#">叶结点3</a></li>
          </ul></li><!--Sub Node n -->
       </ul></li><!--Sub Node 6 -->
      </ul></li><!--Sub Node 5 -->
     </ul></li><!--Sub Node 4-->
    </ul></li><!--Sub Node 3-->
   </ul></li><!--Sub Node 2-->
  <li><a href="#1">二级目录</a>
   <ul>
    <li><a href="#">三级目录</a>
    <ul>
     <li><a href="#">四级目录</a>
     <ul>
      <li><a href="#">五级目录</a>
      <ul>
       <li><a href="#"></a>
       <ul>
        <li><a href="#">第n级目录</a>
         <ul>
          <li class="Child"><a href="#">叶结点1</a></li><!--Child Node-->
          <li class="Child"><a href="#">叶结点2</a></li>
          <li class="Child"><a href="#">叶结点3</a></li>
          </ul></li><!--Sub Node n -->
       </ul></li><!--Sub Node 6 -->
      </ul></li><!--Sub Node 5 -->
     </ul></li><!--Sub Node 4-->
    </ul></li><!--Sub Node 3-->
   </ul></li><!--Sub Node 2-->
 </ul></li><!--Sub Node 1 -->
</ul>
</div><!-- CNLTreeMenu -->
<!--CNLTreeMenu1 End!-->

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 #Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 #Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 #Javascript
JavaScript判断对象是否为数组
Dec 22 #Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 #Javascript
jquery获取select选中值的方法分析
Dec 22 #Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 #Javascript
You might like
五个PHP程序员工具
2008/05/26 PHP
php实现的短网址算法分享
2014/06/20 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python的依赖管理的实现
2019/05/14 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python 实现波浪滤镜特效
2020/12/02 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
升国旗仪式主持词
2014/03/19 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年资料员工作总结
2014/11/18 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL