可展开的树形菜单列表

2024-03-30

我想要实现的目标如下:

我想要一个树视图列表,它将出现在页面的左侧,当展开一个项目时,它的项目是从数据库加载的(我可以做这部分),所以基本上它会像这样:

+Category1
+Category2
+Category3
+Category4

当用户点击+,它将显示以下内容,直到从数据库中抓取数据并将其添加到页面:

+Category1
-Category2
    loading ...
+Category3
+Category4

数据加载后,每个子类别都会有子子类别。

+Category1
-Category2
    +Sub-Cat1
    +Sub-Cat2
    +Sub-Cat3
    +Sub-Cat4
+Category3
+Category4

我怎样才能实现这个目标?

注意:我想知道如何放置(* or >或列表中的任何其他符号,我相信这是 CSS,但我根本不从事设计工作!!)

非常感谢您的帮助。


您对浏览器有什么要求吗?我使用了 [CSS] Ninja 示例以及 selectivizr 来支持旧版本的 IE。除了 [CSS] Ninja 网站上的示例之外,没有可访问的示例:

纯CSS可折叠树形菜单 http://www.thecssninja.com/css/css-tree-menu

和选择性:

选择性 http://selectivizr.com/

该示例旨在将其用于文件导航场景,但如果您愿意,您应该能够相当轻松地修改它以删除文件夹和文件图标。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可展开的树形菜单列表 的相关文章

  • 为什么开发者讨厌 iframe? [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与
  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 更改元素的顺序

    我正在创建一个浮动宽度的网站 用户在智能手机上使用从全高清分辨率到约 600 像素的屏幕 这似乎是一个不错的主意 这就带来了一个非常有趣的问题 当用户使用比最佳分辨率更小的分辨率时 页面的高度会增加很多 这意味着更改某些元素 例如某些图像
  • 使用 highcharts 时,为什么 Bootstrap 选项卡显示宽度不正确的选项卡窗格 div?

    因此 我正在使用 Twitter 的 Bootstrap 创建一个包含选项卡式内容的页面 但我的起始活动 div 的内容始终与其他选项卡的内容不同 例如 我在不同的选项卡中使用 highcharts js 放入图表 但活动选项卡始终显示正确
  • CSS:仅显示字符串的前两个字母

    是否可以使用纯 CSS 仅显示字符串的前两个字母 到目前为止我已经尝试过 没有成功 first letter 仅针对第一个字母 无论如何对我不起作用 nth of everything 需要额外的 javascript 文本溢出 省略号 正
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 如何使用 JavaScript 创建链接?

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使
  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 强制 Listview 不重复使用视图(复选框)

    我做了一个定制Listview 没有覆盖getView 方法 Listview 中的每个项目都具有以下布局 联系布局 xml

随机推荐

  • 未捕获的语法错误:实时但不在本地服务器上出现意外的令牌 B

    所以我正在制作一些ajax帖子 它似乎在本地主机上工作正常 但是当我将其发布到亚马逊上的ec2服务器时 我得到 Uncaught SyntaxError Unexpected token B 这似乎表明 JSON 解析失败 完全相同的数据库
  • 使用 Samsung Galaxy Tab 附加组件将如何影响/限制我的 Android Market 部署?

    我已经针对上述附加组件提供的新构建目标运行了我的 Android 应用程序here http innovator samsungmobile com galaxyTab do 这似乎在模拟器中正常工作 但现在我非常不确定在向市场交付应用程序
  • Math.sqrt Java 的时间复杂度

    Java 中 math sqrt 实现的时间复杂度是多少 Java 以某种技术实现了时间复杂度 我正在尝试确定该技术的时间复杂度 在大多数情况下 Java 尝试使用 智能功率 算法 这会导致时间复杂度为 O log n 智能用电算法 htt
  • vhdl代码(for循环)

    描述 我想编写 vhdl 代码来查找数组 A 中的最大整数 该数组是一个由 20 个整数组成的数组 问题 我的算法应该是什么样子 以输入顺序语句的位置 我的VHDL代码 highnum for i in 0 to 19 loop i 0 i
  • Objective-C:标量属性默认为原子?

    一位朋友告诉我 标量属性 BOOL NSInteger 等 的 property 默认值是非原子的 IE property BOOL followVenmo 默认为 property nonatomic BOOL followVenmo 但
  • 使用反射调用方法

    是否可以通过类的反射来调用方法 class MyObject some methods public void fce call another method of this object via reflection 谢谢 绝对地 imp
  • 播放 2.3.8 sbt 不包括 logback

    我很难排除logback从我的play 2 3 8测试运行来看 我尝试了很多排除规则 但似乎没有任何效果 我在我的依赖树中也找不到它 我的 sbt 文件中的片段 resolvers Seq Typesafe repository snaps
  • CMake 构建工具链中“strip”命令的 Android NDK 路径变量

    我正在尝试添加一个去除调试符号我的 Android 库的步骤 其中包括不同 ABI 的本机共享库 例如x86 native lib so x86 64 native lib so arm64 v8a native lib so etc 我明
  • 如何阅读 PostgreSQL 命令的文档语法?

    我想从数据库 B 中的多个表在数据库 A 中创建一个表 我查阅了 PostgreSQL 的文档here http www postgresql org docs 9 1 static sql createtable html弄清楚命令的用法
  • 如何从 int 转换为 hex

    我想在 Golang 中将 int 转换为 hex 在strconv中 有一个将字符串转换为十六进制的方法 是否有类似的方法从 int 获取十六进制字符串 由于十六进制是整数文字 https golang org ref spec Inte
  • 我可以更改 POST 值而不重新 POST 吗?

    这是在 IIS 6 世界中使用 ASP NET 2 0 我有一个用户提交一个表单 通过 POST 发送数据 接收数据的页面会进行一些简单的验证 如果验证通过 则运行黑盒代码例程 该例程基本上使用 Request Form NameHere
  • 在R中删除国家地图边界之外的数据

    我知道这很简单 但无法让它发挥作用 我想删除下面地图上多余的数据点 我该怎么做 下面的代码给了我结果 ggplot geom polygon data rwa2 aes x long y lat group group colour bla
  • Travis-CI“Android 28 许可证尚未被接受”

    我正在尝试使用 Travis 构建 android 项目android 28 and build tools 28 0 0但无论我做什么我都会得到 gt Failed to install the following Android SDK
  • Excel VBA SQL - 多个数据源

    我有一个相当简单的问题 我找不到答案 我有以下 SQL Select a from filea where a in select b from fileb 我正在尝试使用 VBA 在 Excel 中运行它 我遇到的问题是 filea 是
  • WordPress 导航栏中的自定义短代码

    我只想在我的 WordPress 主题菜单栏中添加一个短代码按钮来处理bootstrap modal view功能 我试过 Shortcodes in Menus 插件 但它不起作用 我在菜单中找不到短代码的替代插件 所以我安装了 Boot
  • 验证 FRAMA-C 中的矩阵转置函数

    我有一个简单的矩阵转置函数 我想用后置条件来验证它 matrix transpose matrix transpose original matrix original matrix 其语法是什么 我试过了 ensures result r
  • shell32 copyhere 在.Net 和 powershell 脚本中都不起作用

    有一个 powershell 脚本可以通过 MTP 以编程方式在 PC 和 Android 之间复制文件 请参阅针对 mtp 连接访问文件系统 http www pstips net access file system against m
  • PHP GET 变量数组注入

    我最近了解到可以将数组注入 PHP GET 变量来执行代码 php a asd a asdasd b a 这就是我得到的例子 我不知道它是如何工作的 并且想知道这是否可能 PHP 将解析查询字符串 并将这些值注入到 GET超全局数组 同样适
  • 如何在 VB NET 中读取控制台缓冲区?

    我见过一个使用 ConsoleRead API 函数的 C 示例 但是当我尝试将其转换为 VBNET 时 出现了很多错误 在其他网站 如 pinvoke 中 独特的示例也是针对 C 的 我找不到任何好的示例ConsoleRead API 函
  • 可展开的树形菜单列表

    我想要实现的目标如下 我想要一个树视图列表 它将出现在页面的左侧 当展开一个项目时 它的项目是从数据库加载的 我可以做这部分 所以基本上它会像这样 Category1 Category2 Category3 Category4 当用户点击