希望鼠标悬浮自动展开大纲

本贴最后更新于 248 天前,其中的信息可能已经渤澥桑田

🙏 🙏 🙏

大佬们能否写个代码片段,当鼠标移动到大纲的时候,大纲对应的内容自动展开,当鼠标移出对应的内容时恢复原来状态

🙏 🙏 🙏

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25720 引用 • 106423 回帖 • 1 关注
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9856 引用 • 44801 回帖 • 76 关注

相关帖子

被采纳的回答
  • wilsons 1

    只展开一级标题,当鼠标移动到对应处时自动展开一级标题的内容,移开时自动收回

    按照这个需求,我实现了这个功能,不知能否是你想要的效果

    效果

    r64.gif

    代码

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • cxg318

    1 到 6 级标题,做成 markdown 超链接或者引用,就好了啊.

  • temacc0531
    1 回复
  • 楼主的需求应该是自动展开大纲子层级

    1 回复
  • CongSec

    还得是你懂我,像这种比较长的大纲,全部展开又太长了,只展开一级标题又太短了,我想的是只展开一级标题,当鼠标移动到对应处时自动展开一级标题的内容,移开时自动收回trollface

    image.png

    2 回复
  • Yvain

    这个功能提的好,我也有同样需求,有的大文档目录太长了,每次都翻半天

  • 我让 GPT 辅助写了一个 JS 片段,基本能实现,但我感觉交互很奇怪:

    // 鼠标移动到大纲标题自动展开与折叠下级 JS片段 setTimeout(() => { const headings = document.querySelectorAll('li.b3-list-item[data-type="NodeHeading"]'); headings.forEach((heading) => { let hideTimeout; let removeTimeout; let isMouseInHeading = false; // 标志变量,跟踪鼠标是否在 heading 内 let isMouseInSubMenu = false; // 标志变量,跟踪鼠标是否在子菜单内 // 鼠标进入列表项 heading.addEventListener('mouseenter', () => { isMouseInHeading = true; // 设置标志变量 clearTimeout(removeTimeout); // 清除可能存在的移除定时器 let nextElement = heading.nextElementSibling; if (nextElement && nextElement.tagName.toLowerCase() === 'ul') { removeTimeout = setTimeout(() => { if (isMouseInHeading) { nextElement.classList.remove('fn__none'); } }, 200); // 延迟 200ms 后再移除 fn__none } }); // 鼠标离开列表项 heading.addEventListener('mouseleave', () => { isMouseInHeading = false; // 更新标志变量 hideTimeout = setTimeout(() => { let nextElement = heading.nextElementSibling; if (nextElement && nextElement.tagName.toLowerCase() === 'ul' && !isMouseInSubMenu) { nextElement.classList.add('fn__none'); } }, 200); // 延迟 200ms 后再添加 fn__none }); // 鼠标移动到 ul > li 上时,阻止 fn__none 添加 let nextElement = heading.nextElementSibling; if (nextElement) { nextElement.querySelectorAll('li').forEach((ulItem) => { ulItem.addEventListener('mouseenter', () => { isMouseInSubMenu = true; // 更新标志变量 clearTimeout(hideTimeout); // 清除定时器,防止隐藏 clearTimeout(removeTimeout); // 清除移除定时器 }); ulItem.addEventListener('mouseleave', () => { isMouseInSubMenu = false; // 更新标志变量 hideTimeout = setTimeout(() => { if (nextElement) { nextElement.classList.add('fn__none'); } }, 200); }); }); } }); }, 1000);
    3 回复
  • CongSec

    你这个好像只能执行一次的 😂 ,而且鼠标移出标题后应该是恢复原来状态不是折叠

    ❤️

  • 这个 ai 这么牛逼还能知道思源的 html 吗,是啥 ai?这么厉害

    1 回复
  • wilsons 1 1 赞同 4 评论

    应该是作为上下文发给 ai 的 😄

    并且逻辑也是我想的,AI 的作用只是输出代码
    JeffreyChen
    @JeffreyChen 是哪个 ai?求推荐
    zxkmm
    @zxkmm 我是通过第三方 API 调用 gpt-4o-mini
    JeffreyChen 1
    @JeffreyChen 感谢,我去康康 gpt4o,之前没听说过这个模型
    zxkmm
  • wilsons 1 1 评论

    只展开一级标题,当鼠标移动到对应处时自动展开一级标题的内容,移开时自动收回

    按照这个需求,我实现了这个功能,不知能否是你想要的效果

    效果

    r64.gif

    代码

    4 回复
    好像使用不了,不知道是不是和文档树相关插件冲突了
    QQQorange
  • 好像使用不了,不知道是不是和文档树相关插件冲突了

  • Yvain

    这个脚本我在思源的代码片段里加载之后,没有作用哎,请问应该如何使用呢?

  • Oldbear

    为什么我添加了你的 js 代码却无法运行功能呢?我的版本的是 3.1.6

    1 回复
  • CongSec

    十分感谢大佬代码 ❤️ ❤️ ❤️

  • 不好意思,我是在升级到 3.1.7 后写的代码片段,所以在 3.1.7 测试通过,之前的版本不清楚,理论上应该没问题,建议升级到 3.1.7 后使用。

    @Yvain 放到 js 代码片段中即可,注意别忘了在代码片段右上角开启 js 代码片段。

    @QQQorange 请先在新空间测试,排除干扰项。

  • CongSec 1 评论

    我这边可以,但是评论区好像挺多不行的,以下是我的插件列表:日历热力图, 自定义块样式, 关系图增强, 导入工具, 替换背景图片, 文档高亮搜索, 数学增强, 侧边备注, 工具栏 Plus, Web 工具集成, 目录插件, 同步感知, 鸿蒙字体和 Twitter Emoji, 移除按钮, 番茄工具箱, 双击文档树, 文档层级导航, 网页视图

    1 回复
    版本是 3.16
    CongSec
  • Yvain

    佬的思维导图是怎么生成的呀

    1 回复
  • GloR

    感谢大佬的代码,试了一下能用,但有个小问题:就是一旦把某个标题折叠起来,好像就不能再展开了(因为鼠标一离开就自动折叠了)

    1 回复
  • 抱歉,设计如此,这是针对楼主的需求定制的,不是满足各种需求和情况的通用版

请输入回帖内容 ...
CongSec
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 网安笔记分享:http://congsec.xyz 香港

推荐标签 标签

  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    336 引用 • 324 回帖 • 1 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 466 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • 996
    13 引用 • 200 回帖 • 3 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 63 关注
  • AWS
    11 引用 • 28 回帖 • 2 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖 • 1 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 739 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 555 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 2 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    167 引用 • 597 回帖 • 2 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 749 回帖
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 87 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 242 回帖
  • Anytype
    3 引用 • 31 回帖 • 24 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 14 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 652 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 7 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 3 关注