简单的js树形菜单

最新推荐文章于 2021-07-07 17:56:57 发布
最新推荐文章于 2021-07-07 17:56:57 发布
阅读量4k 收藏
点赞数
文章标签： class border table div 产品 xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/claymore1114/article/details/5137726
版权

用js控制div的显示和隐藏。

div.style.display = "none" 和 div.style.display = "block"。

页面代码：

 

<!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>

    <title></title>

 

    <script type="text/javascript">

        var count = 0; //做计数器

        var limit = new Array(); //用于记录当前显示的哪几个菜单

        var countlimit = 1; //同时打开菜单数目，可自定义

 

        function expandIt(el) {

            obj = eval("sub" + el);

            if (obj.style.display == "none") {

                obj.style.display = "block"; //显示子菜单

                if (count < countlimit) {//限制2个

                    limit[count] = el; //录入数组

                    count++;

                }

                else {

                    eval("sub" + limit[0]).style.display = "none";

                    for (i = 0; i < limit.length - 1; i++) { limit[i] = limit[i + 1]; } //数组去掉头一位，后面的往前挪一位

                    limit[limit.length - 1] = el;

                }

            }

            else {

                obj.style.display = "none";

                var j;

                for (i = 0; i < limit.length; i++) { if (limit[i] == el) j = i; } //获取当前点击的菜单在limit数组中的位置

                for (i = j; i < limit.length - 1; i++) { limit[i] = limit[i + 1]; } //j以后的数组全部往前挪一位

                limit[limit.length - 1] = null; //删除数组最后一位

                count--;

            }

        }

    </script>

 

</head>

<body>

    <div id="main1" onclick="expandIt(1)">

        <table width="170" height="24" border="0" cellpadding="0" cellspacing="0">

            <tr style="cursor: hand;">

                <td width="26">

                </td>

                <td class="SystemLeft">

                    企业信息

                </td>

            </tr>

        </table>

    </div>

    <div id="sub1" style="display: none">

        <table width="160" border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="AboutList.asp" target="mainFrame" onclick='changeAdminFlag("企业信息列表")'>企业信息列表</a>

                </td>

            </tr>

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="AboutEdit.asp?Result=Add" target="mainFrame" onclick='changeAdminFlag("添加企业信息")'>

                        添加企业信息</a>

                </td>

            </tr>

        </table>

    </div>

    <div id="main2" onclick="expandIt(2)">

        <table width="170" height="24" border="0" cellpadding="0" cellspacing="0">

            <tr style="cursor: hand;">

                <td width="26">

                </td>

                <td class="SystemLeft">

                    新闻资讯

                </td>

            </tr>

        </table>

    </div>

    <div id="sub2" style="display: none">

        <table width="160" border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="NewsSort.asp?Action=Add&ParentID=0" target="mainFrame" onclick='changeAdminFlag("新闻类别")'>

                        新闻类别</a>

                </td>

            </tr>

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="NewsList.asp" target="mainFrame" onclick='changeAdminFlag("新闻列表")'>新闻列表</a>

                </td>

            </tr>

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="NewsEdit.asp?Result=Add" target="mainFrame" onclick='changeAdminFlag("添加新闻")'>

                        添加新闻</a>

                </td>

            </tr>

        </table>

    </div>

    <div id="main3" onclick="expandIt(3)">

        <table width="170" height="24" border="0" cellpadding="0" cellspacing="0">

            <tr style="cursor: hand;">

                <td width="26">

                </td>

                <td class="SystemLeft">

                    产品展示

                </td>

            </tr>

        </table>

    </div>

    <div id="sub3" style="display: none">

        <table width="160" border="0" cellspacing="0" cellpadding="0">

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="ProductSort.asp?Action=Add&ParentID=0" target="mainFrame" onclick='changeAdminFlag("产品类别")'>

                        产品类别</a>

                </td>

            </tr>

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="ProductList.asp" target="mainFrame" onclick='changeAdminFlag("产品列表")'>产品列表</a>

                </td>

            </tr>

            <tr>

                <td width="36" height="22">

                </td>

                <td class="SystemLeft">

                    <a href="ProductEdit.asp?Result=Add" target="mainFrame" onclick='changeAdminFlag("添加产品")'>

                        添加产品</a>

                </td>

            </tr>

        </table>

    </div>

</body>

</html>

 

claymore1114
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JS+CSS简单树形菜单实现方法
10-23
本文将详细讲解如何使用JavaScript和CSS来实现一个简单的树形菜单。 首先，我们来理解JavaScript在此处的作用。JavaScript是客户端脚本语言，用于动态修改HTML和CSS，实现交互效果。在树形菜单的实现中，JavaScript...
javascript实现树形菜单的方法
10-23
总结起来，这个JavaScript树形菜单的实现利用了JavaScript的动态DOM操作、事件监听以及动画效果来创建一个交互式的菜单系统。它展示了如何使用JavaScript将数据结构转换为可交互的用户界面，并且通过平滑的动画效果...
JS实现树形菜单
柚稚的博客
07-07 3571
需求 用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点： 1、data必须含有id和fatherId来表示他们的层级关系 2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-eq
javaScript简易树形菜单案例（分析+代码）
小福气的博客
07-06 460
题目：点击菜单，下级菜单显示；再次点击，下级菜单隐藏，效果如图： 思路分析： 获取需要操作的对象 遍历每一个需要点击的对象 关键点：给遍历出来的对象添加下标属性，这是让点击的对象和内容产生关联的媒介 给每一个需要点击的对象添加点击事件 获取点击对象的下标，并以此下标判断内容是处于隐藏还是显示的状态 JS代码如下： <script> varps=document.querySelectorAll('p') varuls=document...
4行代码简单实现js树形菜单
孤雁是天的寂寞
04-29 130
通常情况下，我们都会用到一些树形菜单，但一时间苦于不知道如何选择合适的控件进行整合。 　　于是打算自己尝试弄个简单的树形菜单。在这过程中，我发现: 对于一棵简单的树形菜单，4行代码足矣。 　　html代码的编写，直接采用了ul-li的嵌套方式。主要的javascript代码如下： 1 $(".menu ul").css("display","none"); 2 $(".menu a")....
树形菜单js实现
java_resolver的博客
07-27 372
我的思路是这样的：1. 首先将所有数据全部取出转化为JSON格式                                     2. 然后加载到页面                                     3. 通过css的display 来控制显示和隐藏 代码案例如下： 树形菜单     .hidden{         di
JS实现简单树形结构菜单
wendyGao_Yin的博客
05-08 3693
功能效果图： 思路： 在无限极别的菜单中，数据一般不是固定的，需要从服务器请求获取： 如果数据量不大，一般是一次请求数据，获取到所有级别的信息 如果数据量比较大，一般只是请求当前这一级的信息，点击展示的时候，再去请求下一级信息（再去动态生成下一级的DOM内容） 创建DOM的时候，有的是一次性把所有级别的DOM创建好（数据量不大），控制显示隐藏，有的也只是渲染第一级别的DOM，点击哪个再去渲染哪个级别的DOM 再优化，可能还要对已经获取的数据或者已经渲染的DOM做缓存。 … 添加事件： 给当前树形折叠菜
JavaScript实现简单的树形菜单效果
10-19
主要为大家详细介绍了JavaScript实现简单的树形菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一个简单的js树形菜单
10-28
说到树形菜单，貌似一般是用在一些管理系统里面的，我是还没有用到过，有些zTree之类的插件已经做得比较好了
简单多级树形菜单
05-19
本项目名为“简单多级树形菜单”，利用了CSS（层叠样式表）、jQuery（一种JavaScript库）以及FontAwesome（一套流行的Web字体图标集）来创建这一功能。下面我们将详细探讨这些技术以及如何结合它们来实现一个多级树...
原生JS树菜菜单(无限级、兼容各浏览器)
01-09
原生JS写的无限级树形菜单(otree.js,otree.css,demo.html,demo1.html,imgs/ )，兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器，以及360/搜狗等其他各浏览器。 可动态添加/删除节点，启用/不启用复选框，启用连线或不连线，支持自定义ICON图标，可获取当前选中节点参数及父级目录树，可用作级联下拉树菜单等。 可获取HTML中li列表自动生成树菜单（可用作网站多级分类目录） 更多功能参见demo.html和demo1.html
javascript 树形菜单
03-24
NULL 博文链接：https://zhouhaitao.iteye.com/blog/1130278
javascript 树形导航菜单实例代码
12-12
代码如下:<!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>树形导航菜单</title> <style type=”text/css”> <!– .p
js 实现的树形目录
12-19
js 实现的树形目录 树实现动态检索数据。
JSTree(js写的树形菜单，支持加载10000节点以上)
12-23
js树形菜单组件，主要解决大数据加载节点卡死问题。
js写简易树结构
SunMoon_444的博客
03-09 177
js写简易树结构 html <!--tab切换页--> <ul id="tabs"> <li class="current"><a class="lia" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">日报</a></li> <
js实现一个简单的树形菜单
woshixkl的博客
07-22 7067
在做练习的时候做到这个，想想觉得常常会用到，就做了下。看了下给的代码，晕了，小白菜看这种代码会晕的啊~~书的题目是《精通HTML5+CSS3+JavaScript网页设计》，小白拿来做练习，在这里吐槽下这本书，希望大家参考下。里面字写错了就算了，中间教程简单，后面题目给的参考代码太复杂了，不适合新手看吧。 （上面js代码书上的供参考，要的可以自己慢慢码~） 下面
用JS写一个网站树形菜单
weixin_30702887的博客
11-08 1256
先上效果图： 主体内容就是侧边展示的一二三级菜单，树形结构的。 前端页面布局内容，页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级： <body> <b><img src="images/fold.gif">树形菜单：</b> <ul><a hr...
JavaScript树型菜单 dtree
03-01
NULL 博文链接：https://jeasony.iteye.com/blog/284708
用Javascript写一个树形菜单
最新发布
05-16
以下是一个简单的树形菜单的JavaScript代码示例： ```html <!-- 在html中定义一个ul元素作为菜单容器 --> 菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> 菜单2 <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值