登录 注册

代码片段：文件树点击标题自动展开

本贴最后更新于 794 天前，其中的信息可能已经时异事殊

先上才艺展示

再不用辛苦瞄准标题左边的箭头了

SiYuan20230407221324.gif

代码

进入：设置/外观/代码片段/JS/这段丢进去

console.log("加载代码片段：自动展开文件树");
document.querySelector('.sy__file').addEventListener('mousedown', event => {
  if (!event.target.classList.contains('b3-list-item__text')) return;
  if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
  const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
  if (b3ListItemToggle.classList.contains('fn__hidden')) return;
  b3ListItemToggle.click();
});
​

PS: 隐藏文件树图标 CSS 送给有缘人，同理放到 CSS 代码片段

.b3-list-item__icon { display: none}
​
  • 思源笔记

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

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

    25884 引用 • 107218 回帖
6 引用
[css] [js] 思源笔记用到现在积累的所有代码片段 • JeffreyChen
有没有一个设置项，在文档树点击笔记的时候可以展开子文档列表 • Undii
[css] [js] 思源笔记用到现在积累的所有代码片段 • Juexe
关于文档目录的优化建议 v2.8.4 siyuan 能否支持二级文件夹 如何在点击文档时自动展开文档的目录
1 操作
Juexe 在 2023-04-07 22:15:18 更新了该帖
南宁 位置
6 感谢
8 收藏
5 赞同
6 引用
1 操作
14 回帖
1.3k 264 70 562 2 13 21 349

相关帖子

14 回帖
代码片段：文件树点击标题自动展开

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Aiviokoo •
    订阅者 恶龙

    感谢，很好用。

  • Yylicon •
    付费者

    要是能像语雀一样支持新建分组就好了，我经常出现瞄不准小箭头，用空文档做分级有时候挺尴尬的

  • yjmsiyuan •

    支持代码段分享

  • wenbocn •
    付费者

    好用，感谢分享 👍

  • QuentinQiao •
    付费者

    好东西！支持！😄

  • mozhu • via Android
    订阅者 付费者 支持者 捐赠者

    其实箭头及左边空白都是可以点击的

  • ffgyghtr •
    付费者

    这个很实用

  • Wolke •
    订阅者 恶龙

    D 大说单击以后还有其他用，所以还是习惯当前方式吧，免得改不过来了 😋

    1 回复
  • Juexe •
    付费者 作者

    其他用我不知道是什么，但是单击展开对我来说才是最有用的 😂

  • seeingrain •
    付费者 捐赠者

    亲测确实好使，妈妈再也不用担心我鼠标点不准小箭头啦！🙏

  • seeingrain •
    付费者 捐赠者

    使用中有个问题，我希望点击文件树时，既展开子文档列表，又打开这个文件树本身。如果整个文档树的滚动条不发生变化就没问题，但是只要文档树滚动条滚动了，那么文件树这个文档本身肯定是打不开的。

    我猜测，思源打开文档监测的是 mouseup 事件，所以我也把代码改成 mouseup，但是改了后经常不管用，时间无法被触发，重启后肯定也不灵了。

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者

    这个是另一种方式，也好使：中键点击展开文档树 JS 片段

  • qiusixian •
    付费者

    OK

    1 操作
    qiusixian 在 2023-12-23 12:14:24 更新了该回帖
  • zzw6776 •
    付费者

    大哥 最新版好像失效了 方便修复下吗

    看了下日志,好像是启动太快导致 addEventListener 函数拿不到,加个延迟函数就行了,后端不会写前端代码,坐等作者更优雅的实现

    setTimeout(function(){
console.log("加载代码片段：自动展开文件树1");
document.querySelector('.sy__file').addEventListener('mousedown', event => {
  if (!event.target.classList.contains('b3-list-item__text')) return;
  if (event.target.parentNode.getAttribute("data-type") !== "navigation-file") return;
  const b3ListItemToggle = event.target.parentNode.querySelector('.b3-list-item__toggle');
    console.log(b3ListItemToggle);
  if (b3ListItemToggle.classList.contains('fn__hidden')) return;
  b3ListItemToggle.click();
});
 }, 3000);
​
    1 操作
    zzw6776 在 2024-01-06 16:53:16 更新了该回帖
请输入回帖内容 ...
Juexe
南宁
回帖
14
 帖子
4
 积分
718

近期热议

推荐标签 标签

  • iOS

    iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 2 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 415 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖 • 2 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 2 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 653 关注
  • Quicker

    Quicker 您的指尖工具箱！操作更少，收获更多！

    37 引用 • 157 回帖 • 1 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React 和 Angular。

    371 引用 • 1856 回帖
  • 设计模式

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

    201 引用 • 120 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 538 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    10 引用 • 54 回帖 • 177 关注
  • Hexo

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

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

    frp 是一个可用于内网穿透的高性能的反向代理应用，支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 2 关注
  • 运维

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

    151 引用 • 257 回帖
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 433 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    184 引用 • 824 回帖 • 1 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 1 关注
  • Swift

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

    34 引用 • 37 回帖 • 554 关注
  • uTools

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

    7 引用 • 27 回帖 • 1 关注
  • OpenShift

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

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

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

    46 引用 • 72 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖 • 1 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    177 引用 • 1254 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 93 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • SQLite

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

    4 引用 • 7 回帖 • 7 关注

最新标签