js显示树形结构，div+css+js

最新推荐文章于 2022-03-23 15:20:04 发布
最新推荐文章于 2022-03-23 15:20:04 发布
阅读量2.6k 收藏
点赞数

复制的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tree</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.node ul{
margin-left:20px;
}
.node .node{
display:none;
}
.node .tree{
height:24px;
line-height:24px;
}
.ce_ceng_close{
background:url(images/cd_zd1.png) left center no-repeat;
padding-left: 15px;
}
.ce_ceng_open{
background:url(images/cd_zd.png) left center no-repeat;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>
<div class="cd_zj_l">


<div class="cd_title">目录导航</div>
<div class="cv_fcv node">
<div class="tree">哲学、宗教</div>
<ul class="node">
<li>
<div class="tree">哲学伦理</div>
<ul class="node">
<li>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
</li>
<div style="clear:both"></div>
</ul>

</li>
<div style="clear:both"></div>
</ul>
<div class="tree">哲学、宗教</div>
<ul class="node">
<li>
<div class="tree">哲学伦理</div>
<ul class="node">
<li>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
<div class="tree">马克思主义哲学</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(".tree").each(function(index, element) {
if($(this).next(".node").length>0){
$(this).addClass("ce_ceng_close");
}
});
$(".tree").click(function(e){
var ul = $(this).next(".node");
if(ul.css("display")=="none"){
ul.slideDown();
$(this).addClass("ce_ceng_open");
ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
}else{
ul.slideUp();
$(this).removeClass("ce_ceng_open");
ul.find(".node").slideUp();
ul.find(".ce_ceng_close").removeClass("ce_ceng_open");
}
});
</script>
</body>
</html>


还有一个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div+CSS+JS树型菜单，可刷新</title>
<meta name="description" content="http://www.livepo.com">
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
    font-family: arial, 宋体, serif;
    font-size:12px;
}
#nav {
    width:180px;
    line-height: 24px;  
    list-style-type: none;
    text-align:left;
    /*定义整个ul菜单的行高和背景色*/
}

/*==================一级目录===================*/
#nav a {
    width: 160px;  
    display: block;
    padding-left:20px;
    /*Width(一定要)，否则下面的Li会变形*/
}

#nav li {
    background:#CCC; /*一级目录的背景色*/
    border-bottom:#FFF 1px solid; /*下面的一条白边*/
    float:left;
    /*float：left,本不应该设置，但由于在Firefox不能正常显示
    继承Nav的width,限制宽度，li自动向下延伸*/
}

#nav li a:hover{
    background:#CC0000;    /*一级目录onMouseOver显示的背景色*/
}

#nav a:link  {
    color:#666; text-decoration:none;
}
#nav a:visited  {
    color:#666;text-decoration:none;
}
#nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
}

/*==================二级目录===================*/
#nav li ul {
    list-style:none;
    text-align:left;
}
#nav li ul li{     
    background: #EBEBEB; /*二级目录的背景色*/
}

#nav li ul a{
         padding-left:20px;
         width:160px;
    /* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}

/*下面是二级目录的链接样式*/

#nav li ul a:link  {
    color:#666; text-decoration:none;
}
#nav li ul a:visited  {
    color:#666;text-decoration:none;
}
#nav li ul a:hover {
    color:#F3F3F3;
    text-decoration:none;
    font-weight:normal;
    background:#CC0000;
    /* 二级onmouseover的字体颜色、背景色*/
}

/*==============================*/
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;  
}
#nav ul.collapsed {
    display: none;
}
-->

#PARENT{
    width:300px;
    padding-left:20px;
}
</style>
</head>

<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1"  οnclick="DoMenu('ChildMenu1')">我的网站</a>
    <ul id="ChildMenu1" class="collapsed">
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
    <li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
    </ul>
</li>
<li><a href="#Menu=ChildMenu2" οnclick="DoMenu('ChildMenu2')">我的帐务</a>
    <ul id="ChildMenu2" class="collapsed">
    <a href="http://www.netany.net" target="_blank">支付</a></li>
    <li><a href="#">网上支付</a></li>
    <li><a href="#">登记汇款</a></li>
    <li><a href="#">在线招领</a></li>
    <li><a href="#">历史帐务</a></li>
    </ul>
</li>
<li><a href="#Menu=ChildMenu3" οnclick="DoMenu('ChildMenu3')">网站管理</a>
    <ul id="ChildMenu3" class="collapsed">
    <li><a href="#">登录</a></li>
    <a href="http://www.netany.net" target="_blank">管理</a></li>
    <li><a href="#">管理</a></li>
    <li><a href="#">管理</a></li>
    </ul>
</li>
<li><a href="#Menu=ChildMenu4" οnclick="DoMenu('ChildMenu4')">网站管理</a>
    <ul id="ChildMenu4" class="collapsed">
    <li><a href="#">登录</a></li>
    <a href="http://www.netany.net" target="_blank">管理</a></li>
    <li><a href="#">管理</a></li>
    <li><a href="#">管理</a></li>
    </ul>
</li>
</ul>
</div>

<div style="width:300;padding-left:30px;">
</br></br>
工作需要搞了一个菜单，分享给大家，大家一齐学习
</br></br>
<p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p>
</div>
</body>
</html>
<script type=text/javascript><!--
var LastLeftID = "";

function menuFix() {
    var obj = document.getElementById("nav").getElementsByTagName("li");
     
    for (var i=0; i<obj.length; i++) {
        obj[i].οnmοuseοver=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        obj[i].onMouseDown=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        obj[i].onMouseUp=function() {
            this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        obj[i].οnmοuseοut=function() {
            this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
        }
    }
}

function DoMenu(emid)
{
    var obj = document.getElementById(emid);     
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
    if((LastLeftID!="")&&(emid!=LastLeftID))    //关闭上一个Menu
    {
        document.getElementById(LastLeftID).className = "collapsed";
    }
    LastLeftID = emid;
}

function GetMenuID()
{

    var MenuID="";
    var _paramStr = new String(window.location.href);

    var _sharpPos = _paramStr.indexOf("#");
     
    if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
    {
        _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
    }
    else
    {
        _paramStr = "";
    }
     
    if (_paramStr.length > 0)
    {
        var _paramArr = _paramStr.split("&");
        if (_paramArr.length>0)
        {
            var _paramKeyVal = _paramArr[0].split("=");
            if (_paramKeyVal.length>0)
            {
                MenuID = _paramKeyVal[1];
            }
        }
        /*
        if (_paramArr.length>0)
        {
            var _arr = new Array(_paramArr.length);
        }
         
        //取所有#后面的，菜单只需用到Menu
        //for (var i = 0; i < _paramArr.length; i++)
        {
            var _paramKeyVal = _paramArr[i].split('=');
             
            if (_paramKeyVal.length>0)
            {
                _arr[_paramKeyVal[0]] = _paramKeyVal[1];
            }         
        }
        */
    }
     
    if(MenuID!="")
    {
        DoMenu(MenuID)
    }
}

GetMenuID();    //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>




jcroad
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js 输出树形结构
qiuqidehao的博客
06-22 2089
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="tree"&gt;&am
DIV+CSS+JS树形菜单
07-27
综上所述，构建“DIV+CSS+JS树形菜单”涉及了HTML结构设计、CSS样式美化以及JavaScript交互实现，是前端开发中常见的技能之一。通过学习和理解这些技术，开发者能够创建出功能丰富、交互性强的网页导航菜单。
JavaScript写的树形展示
06-01
JavaScript树形展示JavaScript树形展示JavaScript树形展示
JS 树形结构展示
漫漫长路,憩息港湾.(深水鱼)
03-26 215
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
js实现树状结构
03-12
用Dtree写的树状结构,代码解释详细。
js实现树形内容展示
weixin_30767921的博客
03-17 580
1.首先这里有一个demo，里边有封装好的js文件。地址：http://files.cnblogs.com/files/feifeishi/dtree.zip 2.直接上代码 <div style="height:auto;margin-left: 20px;"> <s:iter...
使用jsTree实现js树形结构
06-07
jsTree 是一个强大的 JavaScript 库，专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写，无需依赖其他库，因此对于初学者和有经验的开发者来说，都是一个易于理解和使用的工具。通过这个库，你...
js 树形控件，html+css+ js
02-12
在前端开发中，树形控件是一种常见的UI组件，它以层级结构展示数据，常用于文件目录、组织架构、导航菜单等场景。本教程将详细探讨如何使用HTML、CSS和JavaScript来实现一个基本的树形控件。 首先，我们需要创建...
Div+Css+js树形菜单
01-05
本项目以“Div+Css+js树形菜单”为主题，利用HTML的Div元素、CSS样式和JavaScript脚本来实现一个功能完备、视觉效果良好的树形菜单。 首先，Div是HTML中的一个布局容器，用于组织和控制页面内容的布局。在树形菜单...
div+css+js树形导航
08-08
1. 使用HTML创建基本的树形结构，每个节点用`div`表示，通过`class`或`id`属性来区分不同层级和状态。 2. 编写CSS样式，定义节点的基本样式，以及在展开/折叠状态下的样式变化。例如，设置折叠状态时子节点的`...
树型结构(javascript+css+html)
09-17
javascript作的树型结构javascript作的树型结构javascript作的树型结构
用Js和css实现树状图
01-16
大家来学学，共同努力。 下载完后，可以点击index.html看看效果，自己还可以在加上自己需要的
js实现树形图
09-03
简单易用的js实现树形图，适于通用目录树。现成源码，直接使用。
javascript实现在下拉列表中显示多级树形菜单的方法
10-23
主要介绍了javascript实现在下拉列表中显示多级树形菜单的方法,涉及javascript属性菜单的定义、构造及遍历等技巧,具有一定参考借鉴价值,需要的朋友可以参考下
bootstrop 树形结构模版
01-05
tree-multiselect.js 完美的树形结构
DIV+Js实现简单树形菜单
liaodan520的专栏
07-09 775
 META content="Microsoft Visual Studio .NET 7.1" name=GENERATOR>META content=VisualStudio.HTML name=ProgId>META content="Microsoft Visual Studio .NET 7.1" name=Originator=jscript>   function Chang
JS实现一键展开、折叠所有树节点
王世洪的博客
03-23 3524
在数据分析报表中，通常会有结构树展开的分析报表。在结构树节点较多的时候，逐个进行展开、折叠等操作时，会比较繁琐、费时间、费手劲；此处示例通过点击按钮的方式，使用js实现一键展开、折叠所有的树节点（不限制层数） 1、设置JS事件 在需要事件展开/折叠的单元格/按钮上，添加“超级链接”，分别键入JavaScript事件控制： 展开事件： $('.x-treenode-unexpand').trigger('click'); 折叠事件： $(".x-treenode-expand").
jsTree设置默认节点全部展开的方法
weixin_34405557的博客
12-20 2162
最近项目有需求,当jsTree加载完毕的时候想让所有的节点都打开,便于用户操作,遂参考API,这里记录下来.好记性不如烂笔头: //jsTree的初始化 $tree.jstree({ 'plugins': ["search", "types", "wholerow", "state"], ... //太具体的初始化这里不在赘述 ...
jstree默认展开所有子节点
csdn_chengpeng的博客
11-22 2180
1.首先给jstree实例绑定on事件 2.事件类型设置为 ready.jstree （所有节点加载后触发） 3.设置实例属性为 open_all $(‘#div-tree’).jstree({ 'core': { 'data': function (node, callback) { callback.call(this, data); ...
帮我用html + css + js 写一个树结构
最新发布
07-12
以下是一个简单的示例，使用 HTML、CSS 和 JavaScript 创建一个树形结构： ```html <!DOCTYPE html> /* 树节点的样式 */ .tree-node { margin-left: 20px; } /* 树节点的连接线 */ .tree-connector { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值