列表实现树形菜单

青旅半醒 2022-06-10 14:16 233阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>可展开列表</title>
        <style> .open{ list-style-image: url(img/add.png); } .close{ list-style-image: url(img/dec.png); } .open,.close{ cursor: pointer; } .open ul,.close ul{ list-style-image: none; cursor: default; } .open ul{ display: none; } </style>
        <script> window.onload = setFunction; function setFunction(){ var lis = document.getElementsByTagName('li'); for(var i =0;i<lis.length;i++){ if(lis[i].className == 'open') lis[i].onmouseup = handlemouseup; } } function handlemouseup(){ var state; if(this.className == 'open'){ this.className='close'; state=''; }else if(this.className == 'close'){ this.className = 'open'; state = 'none'; } var ulobj = this.getElementsByTagName('ul'); ulobj[0].style.display = state; } </script>
    </head>
    <body>
    <ul>
        <li class="open">
            Layer1 item1
            <ul>
                <li>Layer2 item1</li>
                <li>Layer2 item2</li>
                <li>Layer2 item3</li>
            </ul>
        </li>
        <li class="open">
            Layer1 item2
            <ul>
                <li>Layer2 item1</li>
                <li>Layer2 item2</li>
                <li>Layer2 item3</li>
            </ul>
        </li>
        <li class="open">
            Layer1 item3
            <ul>
                <li>Layer2 item1</li>
                <li>Layer2 item2</li>
                <li>Layer2 item3</li>
            </ul>
        </li>
    </ul>
    </body>
    </html>

> 第二层的ul标签会继承list-style-image以及cursor属性，所以还需要将它们设置为默认值

初始状态效果图：  
![效果图][SouthEast]  
  
点击效果图：  
![效果图][SouthEast 1]

[SouthEast]: /images/20220610/dd8a7c0f58c54c9c81c2a4529fb0496f.png
[SouthEast 1]: /images/20220610/86a17702eca24cb3bb39f4f48310f9a1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关树形菜单导航Vue和Element实现

最近做项目时遇到一小难点，动态渲染element-ui 的侧边栏导航菜单，有三级路由，有二级的，渲染完事了发现二级的跳转不了路由，这可着急坏了，出了一身汗。。。。 ![在

分手后的思念是犯贱/ 2023年06月20日 06:01/ 0 赞/ 5 阅读

相关 java实现树形菜单

最近要开发一个菜单接口，结构是父菜单下面有子菜单，子菜单下面还有子菜单，要实现树形结构返给前端。数据表设计 CREATE TABLE `platform_me

Bertha 。/ 2022年09月10日 05:14/ 0 赞/ 262 阅读

相关 Android---多级树形菜单的实现

本文来自 [http://blog.csdn.net/hellogv/][http_blog.csdn.net_hellogv] ，引用必须注明出处！在An

叁歲伎倆/ 2022年08月21日 09:57/ 0 赞/ 264 阅读

相关 DTree实现树形菜单

新建一个web工程需要一个index.jsp放在webroot下，一个dtree.js放在webroot下的js（自己new的Folder）里，一个dtree.css放在w

ゝ一纸荒年。/ 2022年06月12日 08:59/ 0 赞/ 259 阅读

相关列表实现树形菜单

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

青旅半醒/ 2022年06月10日 14:16/ 0 赞/ 234 阅读

相关 div树形菜单

DIV树：client\_Tree.jsp ClientTreeReader.java 1、servlet里

╰+哭是因爲堅強的太久メ/ 2022年06月09日 02:55/ 0 赞/ 234 阅读

相关 div树形菜单

DIV树：client\_Tree.jsp ClientTreeReader.java 1、servlet里：

刺骨的言语ヽ痛彻心扉/ 2022年06月09日 02:40/ 0 赞/ 278 阅读

相关 bootstrap树形菜单

效果图 ![图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

客官°小女子只卖身不卖艺/ 2022年06月05日 00:58/ 0 赞/ 303 阅读

相关 Java树形菜单____Ztree树形菜单使用教程

//系统结构图 ![Center][] //====================简单JSON数据的单选树形菜单==========================

缺乏、安全感/ 2022年06月04日 02:17/ 0 赞/ 396 阅读

相关 Java中树形菜单分析和实现

一、背景概述最近在搭建基于Spring Boot(2.0.2)种子项目框架时，遇到了树形菜单加载问题。特此把解决的问题方案记录下去，供其他小伙伴参考和日后回顾。

拼搏现实的明天。/ 2022年05月22日 07:46/ 0 赞/ 208 阅读