JavaScript+CSS无限极分类代码

最新推荐文章于 2024-07-24 20:42:50 发布
最新推荐文章于 2024-07-24 20:42:50 发布
阅读量98 收藏
点赞数 1
分类专栏： JavaScript CSS 文章标签： css javascript html
原文链接：https://www.weidianyuedu.com/content/1218550041934.html
版权
JavaScript 同时被 2 个专栏收录
254 篇文章 0 订阅
订阅专栏
CSS
131 篇文章 1 订阅
订阅专栏

转自：微点阅读  https://www.weidianyuedu.com

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\" οnclick=\"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="#" οnclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw("AllClose_1");">全部展开</a><a id="AllClose_1" href="#" οnclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw("AllOpen_1");" style="display:none;">全部折叠</a></p>

<ul>

  <li class="Opened"><a href="http://www.iecn.net">IECN.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!-->

xiaoweids
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现无极分类+树型菜单目录.rar
06-10
javascript实现无极分类，菜单内容是读取JSON格式的数据，并非写死，灵活性很强大！
js无限分级 树_js实现无限级树形导航列表
weixin_39890332的博客
12-23 131
js实现的无限级树形下拉导航列表 *{ margin:0; padding:0; list-style:none;}body { margin:20px;}h2 { font-family:"黑体"; font-size:24px; text-align:center; line-height:32px;}h5 { font-size:12px; text-align:center; fon...
js实现无限级目录树
SCUhzs
09-09 1034
文章目录原理N叉树的遍历显示/隐藏功能防止冒泡完整代码参考资料 原理 N叉树的遍历 每个data的数据格式如下： var oneChoice = { name: 'A', child: [ { name: 'A-1' child:[ {...}, {...} ] }, { } ] } 最终拼接成的html格式如下。 <li> <span>-</span>AAA <ul>
原生js实现无限目录树.zip
12-10
原生js实现无限目录树、实现方式分别一次加载（所有数据）、异步加载（点击加载下一级数据） 数据是使用node实现交互
纯html无限级目录树,利用Ajax实现无限级目录树（.NET)[转载]
weixin_39622123的博客
06-16 145
比较符合自己的习惯，整个代码不难。是利用CSS实现的。家里的电脑上不能安装MS SQL，索性就用MySQL。顺路学习了一下使用MySql的Function。希望使用的XDJM能在这里留个言。谢谢数据库：ysql> create table category(-> categoryid int,-> categoryname varchar(20),-> FatherId i...
关于JavaScript+CSS无限极分类代码
ysds20211402的博客
03-14 64
转自：微点阅读 https://www.weidianyuedu.com a{undefined }{text-decoration:none;} a,a:visited{undefined }{color:#000;background:inherit;} body{undefined }{margin:0;padding:20px;font:12pxtahoma,宋体,sans-serif;} dt{undefined }{font-size:22px;font-wei...
JavaScript+CSS无限极分类效果完整实现方法
10-23
主要介绍了JavaScript+CSS无限极分类效果完整实现方法,涉及JavaScript针对页面元素节点遍历与动态操作技巧,需要的朋友可以参考下
css+js 无限极树形菜单
07-07
以上就是使用CSS和JavaScript构建无限极树形菜单的基本思路。在实际项目中，还可以根据需求添加更多的功能，如搜索、排序、筛选等。提供的文件名列表中，`lTREE.2.css`应该是用于定义树形菜单样式的CSS文件，`index....
BootStrap无限级分类(无限极分类封装版)
09-01
在给出的代码示例中，我们看到一个基于jQuery的无限级分类实现。首先，HTML部分包含两个预留给分类显示的`div`元素，分别用`box1`和`box2`作为ID。页面引用了Bootstrap的CSS和jQuery库，以及一个自定义的`duoji.js`...
jQuery无限极侧边下拉菜单代码.zip
10-09
总的来说，"jQuery无限极侧边下拉菜单代码"是一个高效且灵活的解决方案，它结合了jQuery的便利性和CSS的灵活性，可以方便地创建美观且响应式的侧边菜单。无论你是初学者还是经验丰富的开发者，都可以通过理解并修改...
JS 基础篇(无极限目录树，侧边栏菜单）
热门推荐
一点一滴
01-20 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
js无限分级 树_js无限级树菜单
weixin_35012177的博客
12-23 120
以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的js控制，后来原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现这个树比较简单好用。http://hovertree.com/texiao/js/9.htm这个无限级可刷新Js树型菜单 menuTree1、可设置无限级菜单2、不必使用框架3、可刷新，多页面内跳转不会影响菜单4、可限级创造子树5、支持目前主流浏览器：IE5，6，7，8，...
前端html/js/css实现无限级目录树结构，点击目录展示当前子目录
qq_40868156的博客
10-10 2399
无限级，无级别限制，目录树前端实现，点击目录展示当前所有子目录，js，html
js实现无限级分类
weixin_42371812的博客
08-12 974
在平时的开发中，常常会遇上做类似无限级分类的功能，比如说中国城市的三级分类，或者是电商系统中的商品分类等等。在这儿，我也给大家分享几个无限级分类的代码。当然，也还有一种写法，它封装后是树状的，也就是每一个父级下都会有一个child，对应它的子级。调用出来的结果就是这样子的。...
CSS：mix-blend-mode属性（设置元素的混合模式）
最新发布
m0_65029152的博客
07-24 954
本文主要记录CSS中，mix-blend-mode属性的相关内容，并实现页面中的文字适配背景效果；
CSS学习笔记
ngczx的博客
07-23 460
CSS学习笔记
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1265
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
CSS技巧专栏：一日一例 11 -纯CSS实现多彩渐变按钮系列特效
uu0216的博客
07-24 572
这是一个系列的按钮，它们具有共同的特点：底层按钮层，具有一个彩色的渐变边框，上层是依据hover效果需要，可以是渐变，可以时白色。鼠标hover效果都是一样的：背景色位移或变化。本篇文章仅介绍第三个按钮的做法，其他的做法，我会写在源文件里，但不写在本篇里。
php 传引用无限极分类
12-11
在无限极分类中，使用传引用...总之，PHP中的传引用可以在处理无限极分类数据时起到很大的作用，它可以节省内存空间，简化代码逻辑，以及方便递归函数的调用。因此，传引用是处理无限极分类时的一种非常有效的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值