登录 注册

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

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

先上才艺展示

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

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}
​
  • 思源笔记

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

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

    25735 引用 • 106496 回帖
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 65 559 2 13 21 337

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • seeingrain •
    付费者 捐赠者

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

  • 其他回帖
  • Wolke •
    订阅者 恶龙

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

    1 回复
  • 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 更新了该回帖
  • wenbocn •
    付费者

    好用，感谢分享 👍

  • 查看全部回帖
Juexe
南宁
回帖
14
 帖子
4
 积分
718

近期热议

推荐标签 标签

  • JRebel

    JRebel 是一款 Java 虚拟机插件，它使得 Java 程序员能在不进行重部署的情况下，即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 677 关注
  • TextBundle

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

    1 引用 • 2 回帖 • 84 关注
  • Rust

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

    58 引用 • 22 回帖 • 10 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 1 关注
  • 微服务

    微服务架构是一种架构模式，它提倡将单一应用划分成一组小的服务。服务之间互相协调，互相配合，为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建，能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎，可以结合 MySQL、PostgreSQL 做全文搜索，它可以提供比数据库本身更专业的搜索功能，使得应用程序更容易实现专业化的全文检索。

    1 引用 • 223 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • 设计模式

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

    200 引用 • 120 回帖
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 278 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 35 关注
  • WebClipper

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

    3 引用 • 9 回帖 • 1 关注
  • 微软

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

    8 引用 • 44 回帖
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务，可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务，所以该项目也已经停止维护了！

    35 引用 • 468 回帖 • 761 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 27 关注
  • 深度学习

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

    43 引用 • 44 回帖
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • Laravel

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

    19 引用 • 23 回帖 • 740 关注
  • 快应用

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

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

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 184 关注
  • 自由行
    • 2 关注
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖 • 1 关注

最新标签