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 相关文章推荐
js常用函数 不错
Sep 08 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
python实现下载文件的三种方法
2017/02/09 Python
django 创建过滤器的实例详解
2017/08/14 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
先进个人事迹材料范文
2014/12/30 职场文书
Python 内置函数速查表一览
2021/06/02 Python
React实现动效弹窗组件
2021/06/21 Javascript
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android