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

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

🙏 🙏 🙏

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

🙏 🙏 🙏

  • 思源笔记

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

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

    24983 引用 • 102916 回帖 • 1 关注
  • Q&A

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

    9513 引用 • 43329 回帖 • 108 关注

相关帖子

被采纳的回答
  • 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
新手可以看我发的求助帖以及汇总帖子,很有帮助的!_! 香港

推荐标签 标签

  • sts
    2 引用 • 2 回帖 • 224 关注
  • SQLServer

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

    21 引用 • 31 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 388 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 5 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 72 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • HBase

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

    17 引用 • 6 回帖 • 60 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • 安全

    安全永远都不是一个小问题。

    203 引用 • 818 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 7 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • V2Ray
    1 引用 • 15 回帖 • 2 关注
  • FreeMarker

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

    23 引用 • 20 回帖 • 454 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • Swift

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

    36 引用 • 37 回帖 • 544 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 444 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 8 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 649 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 366 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注