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

1 到 6 级标题,做成 markdown 超链接或者引用,就好了啊.

我让 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.1.7 后写的代码片段，所以在 3.1.7 测试通过，之前的版本不清楚，理论上应该没问题，建议升级到 3.1.7 后使用。

@Yvain 放到 js 代码片段中即可，注意别忘了在代码片段右上角开启 js 代码片段。

@QQQorange 请先在新空间测试，排除干扰项。

感谢大佬的代码，试了一下能用，但有个小问题：就是一旦把某个标题折叠起来，好像就不能再展开了（因为鼠标一离开就自动折叠了）