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

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

🙏 🙏 🙏

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

🙏 🙏 🙏

  • 思源笔记

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

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

    25533 引用 • 105606 回帖 • 1 关注
  • Q&A

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

    9769 引用 • 44449 回帖 • 88 关注

相关帖子

被采纳的回答
  • 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 香港

推荐标签 标签

  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    7 引用 • 15 回帖 • 9 关注
  • 快应用

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

    15 引用 • 127 回帖 • 2 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖
  • 自由行
  • Q&A

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

    9769 引用 • 44449 回帖 • 88 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 4 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • RemNote
    2 引用 • 16 回帖 • 14 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • 笔记

    好记性不如烂笔头。

    310 引用 • 794 回帖
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 638 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 183 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 176 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 548 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 4 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 安装

    你若安好,便是晴天。

    132 引用 • 1184 回帖 • 2 关注
  • 印象笔记
    3 引用 • 16 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    133 引用 • 1124 回帖 • 108 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 200 关注
  • abitmean

    有点意思就行了

    33 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 110 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注