登录 注册

求 js 代码，只展开当前活动页签的文档树

本贴最后更新于 208 天前，其中的信息可能已经时移俗易

求 js 代码，在使用“始终定位打开的文档”功能时，只展开当前文档的文档树，自动关闭（不展开）其它无关的文档树。例如：

有笔记本 A，内有文档 A1，子文档 A2、子子文档 A3。

有笔记本 B，内有文档 B1，子文档 B2、子子文档 B3。

已将文档 A2、B2 打开，显示在上方页签栏中。

启用“始终定位打开的文档”功能。

点击 A2 页签，左侧文档树自动展开，并定位到 A-A1-A2；A3 列表不展开

点击 B2 页签，左侧文档树自动展开，定位到 B-B1-B2；同时关闭 A-A1-A2 文档树的展开状态，恢复到笔记本 A。也就是仅保留当前活动页签对应的文档树是展开状态，其它文档树分支全部关闭，包括当前活动文档的子文档树。

  • 思源笔记

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

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

    23125 引用 • 93110 回帖 • 1 关注
  • Q&A

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

    8508 引用 • 38767 回帖 • 153 关注
1 操作
wenbocn 在 2024-06-02 13:54:35 更新了该帖
济南 位置
200 悬赏
1 关注
4 收藏
1 操作
30 回帖
13
9
3
2
2
647 180 454 1 2 7

相关帖子

被采纳的回答
  • wilsons • • 1
    付费者 捐赠者

    时隔 1 个多月，你解决了吗？相见即是有缘，看到此贴感觉有些思路，就尝试写了下，实现了这个功能。由于刚接触思源，对思源 api 还不是很了解，所以选择用 js 代码片段实现，纯原生 js 实现，方法比较笨，勉强能用。

    不足之处也请论坛里的大佬们多多批评指正！

    效果如下：

    t2.gif

    完整代码如下：

    // 等待标签页容器渲染完成后开始监听
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 中新增加代码片段，然后把上面的代码粘贴过去即可。

    image.png

30 回帖
求 js 代码，只展开当前活动页签的文档树

欢迎来到这里！

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

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

    对了，我也很好奇，我发现 1 个月前的帖子无法顶上来，没在首页或最新那里出现，你们是怎么看到的？

    2 回复
  • 其他回帖
  • wilsons •
    付费者 捐赠者

    现在就是点击文档页签，折叠所有文档树，然后定位打开的文档，使用设置的保持定位和 js 去定位效果是一样的。这里最多不折叠当前文档下的笔记目录，但仅仅这样仍然会跳动的，因为折叠过程必然会显得跳动。至于当前笔记下的其他目录是否折叠这看你需求。貌似你的需求只显示当前文档所在目录，其他统统折叠，无论是否相同笔记下。晚点我看看能否改进，但不一定能，别抱希望，免得到时候希望越大失望越大。

    论坛有大佬有好办法的也请多多指点！

    1 回复
  • wenbocn •
    付费者 作者

    使用 ChatGPT 修改了代码，点击文档树，不会有跳动现象了。但点击标签页及正文后的输入焦点在文档内，能够正常编辑文档，但显示焦点却在文档树的按钮上，不知咋回事。

    // 等待元素渲染完成后执行
function whenElementExist(selector) {
    return new Promise(resolve => {
        const checkForElement = () => {
            const element = typeof selector === 'function' ? selector() : document.querySelector(selector);
            if (element) {
                resolve(element);
            } else {
                requestAnimationFrame(checkForElement);
            }
        };
        checkForElement();
    });
}

// 延迟执行
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// 折叠所有笔记，然后定位当前笔记
async function collapseAllBooksThenFocusCurrentBook(tab) {
    const currentBookName = tab.getAttribute("aria-label")?.split('/')[0];

    // 等待文档加载完毕
    await whenElementExist(() => {
        const content = document.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(book => {
        const bookName = book.querySelector('li[data-type="navigation-root"] span.b3-list-item__text')?.innerText;
        if (bookName !== currentBookName) {
            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(callback) {
    const observerCallback = (mutationsList) => {
        mutationsList.forEach(mutation => {
            if ((mutation.type === 'attributes' && mutation.attributeName === 'class') ||
                (mutation.type === 'childList' && mutation.addedNodes.length > 0)) {
                const focusedTab = mutation.target.closest('li[data-type="tab-header"].item--focus');
                if (focusedTab) callback(focusedTab);
            }
        });
    };

    const observer = new MutationObserver(observerCallback);
    observer.observe(document.querySelector('.layout__center'), { attributes: true, childList: true, subtree: true });
    return () => observer.disconnect();
}

// 主函数，等待容器渲染后开始监听
whenElementExist('.layout__center').then(async () => {
    await sleep(40);
    observeTabChanged(collapseAllBooksThenFocusCurrentBook);
});
    1 回复
  • wilsons • • 2
    付费者 捐赠者

    @wenbocn 我已完美实现了不闪动的版本，并且改进了官方定位，在未打开目录树时，左侧 dock 区目录树显示隐藏按钮样式会获取焦点的 bug

    效果如下

    t6.gif

    完整代码如下

    由于链滴代码长度有限制，只能放到 jsrun 了。

    3 回复
    2 引用
  • 查看全部回帖
wenbocn
济南
回帖
339
 帖子
60
 积分
12702

近期热议

推荐标签 标签

  • jsDelivr

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

    5 引用 • 31 回帖 • 72 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖 • 1 关注
  • Webswing

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

    1 引用 • 15 回帖 • 637 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3454 回帖 • 188 关注
  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    136 引用 • 193 回帖 • 1 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 484 关注
  • API

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

    77 引用 • 430 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端，也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 734 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言，具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法简捷和清晰，尽量使用无异义的英语单词，与其它大多数程序设计语言使用大括号不一样，它使用缩进来定义语句块。

    546 引用 • 672 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3574 回帖
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 24 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 367 关注
  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 588 关注
  • ReactiveX

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

    1 引用 • 2 回帖 • 161 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 65 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 104 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 58 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    43 引用 • 208 回帖
  • Facebook

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

    4 引用 • 15 回帖 • 439 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 627 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 715 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 8 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    171 引用 • 513 回帖
  • OpenShift

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

    14 引用 • 20 回帖 • 632 关注

最新标签