求 js 代码，在使用“始终定位打开的文档”功能时，只展开当前文档的文档树，自动关闭（不展开）其它无关的文档树。例如：
有笔记本 A，内有文档 A1，子文档 A2、子子文档 A3。
有笔记本 B，内有文档 B1，子文档 B2、子子文档 B3。
已将文档 A2、B2 打开，显示在上方页签栏中。
启用“始终定位打开的文档”功能。
点击 A2 页签，左侧文档树自动展开，并定位到 A-A1-A2；A3 列表不展开
点击 B2 页签，左侧文档树自动展开，定位到 B-B1-B2；同时关闭 A-A1-A2 文档树的展开状态，恢复到笔记本 A。也就是仅保留当前活动页签对应的文档树是展开状态，其它文档树分支全部关闭，包括当前活动文档的子文档树。
思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。
融合块、大纲和双向链接，重构你的思维。
提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
时隔 1 个多月，你解决了吗？相见即是有缘，看到此贴感觉有些思路，就尝试写了下，实现了这个功能。由于刚接触思源，对思源 api 还不是很了解，所以选择用 js 代码片段实现，纯原生 js 实现，方法比较笨，勉强能用。
不足之处也请论坛里的大佬们多多批评指正！
效果如下：
完整代码如下：
// 等待标签页容器渲染完成后开始监听
whenElementExist('.layout__center').then(async element => {
// 等待笔记列表加载完毕
await sleep(40);
// 监听页签切换事件
observeTabChanged(element, (tab) => {
// 折叠所有笔记，然后定位当前笔记
collapseAllBooksThenFocusCurrentBook(element, tab);
});
});
// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(element, tab) {
// 等待激活文档加载完毕
await whenElementExist(()=>{
const content = element.querySelector('.layout-tab-container [data-id="'+tab.getAttribute("data-id")+'"]');
return content && content.getAttribute("data-loading") === "finished";
});
// 折叠所有笔记
document.querySelectorAll("ul.b3-list[data-url]").forEach(async book => {
const bookName = tab.getAttribute("aria-label")?.split('/')[0];
if(bookName) {
// 如果在本笔记中则不再折叠
const bookText = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
if(bookText === bookName) {
return;
}
}
// 折叠笔记
const bookArrowBtn = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__toggle');
if (bookArrowBtn && bookArrowBtn.firstElementChild.classList.contains("b3-list-item__arrow--open")) {
bookArrowBtn.click();
}
});
// 定位当前笔记
document.querySelector(".layout-tab-container .block__icons span[data-type=focus]")?.click();
}
// 监听页签切换事件
function observeTabChanged(parentNode, callback) {
// 创建一个回调函数来处理观察到的变化
const observerCallback = function(mutationsList, observer) {
// 用常规方式遍历 mutationsList 中的每一个 mutation
for (let mutation of mutationsList) {
// 属性被修改
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const element = mutation.target;
if (element.tagName.toLowerCase() === 'li' && element.getAttribute('data-type') === 'tab-header' && element.classList.contains('item--focus')) {
if(typeof callback === 'function') callback(element);
}
}
// 如果有新的子节点被添加
if (mutation.type === 'childList') {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'li') {
if (node.getAttribute('data-type') === 'tab-header' && node.classList.contains('item--focus')) {
if(typeof callback === 'function') callback(node);
}
}
});
}
}
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(observerCallback);
// 配置观察器：传递一个对象来指定观察器的行为
const config = { attributes: true, attributeFilter: ['class'], childList: true, subtree: true };
// 开始观察目标节点
observer.observe(parentNode, config);
// 返回一个函数，用于停止观察
return function stopObserving() {
observer.disconnect();
};
}
// 延迟执行
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// 等待元素渲染完成后执行
function whenElementExist(selector) {
return new Promise(resolve => {
const checkForElement = () => {
let element = null;
if (typeof selector === 'function') {
element = selector();
} else {
element = document.querySelector(selector);
}
if (element) {
resolve(element);
} else {
requestAnimationFrame(checkForElement);
}
};
checkForElement();
});
}
使用方法：
设置 》外观 》代码片段 》js 中新增加代码片段，然后把上面的代码粘贴过去即可。
发了 https://sypai.cc/archives/977/
@wenbocn 从代码中提取的这段代码，本意是想通过标签的 aria-label 属性实现，如果展开的笔记是当前点击的文档所在笔记不再折叠再展开了，这样防止出现跳动。但现在想来如果同一个笔记下，展开多个目录可能会导致同个笔记下的文档切换时不再折叠，不知道是否符合你的需求，如果不符合，建议把这段代码删除。而且这段代码在打开文档时还会出现跳动，实现并不完美。
const bookName = tab.getAttribute("aria-label")?.split('/')[0];
if(bookName) {
// 如果在本笔记中则不再折叠
const bookText = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
if(bookText === bookName) {
return;
}
}
比如，如下场景不会折叠同个笔记下的目录
JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。
Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。
AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。
面试造航母，上班拧螺丝。多面试，少加班。
星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。
据说 99% 的性能瓶颈都在数据库。
Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。
FreeMarker 是一款好用且功能强大的 Java 模版引擎。
IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。
找到自己的位置，萌新烦恼少。
OkHttp 是一款 HTTP & HTTP/2 客户端库，专为 Android 和 Java 应用打造。
webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。
提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。
人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。
微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！
uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。
WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。
DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。
Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。
HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。
Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。
快应用 是基于手机硬件平台的新型应用形态；标准是由主流手机厂商组成的快应用联盟联合制定；快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台；以平台化的生态模式对个人开发者和企业开发者全品类开放。
Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。
有点意思就行了