大纲鼠标移入自动展开 1

大纲鼠标移入自动展开1

r63

// see https://ld246.com/article/1727096963532
(async ()=>{
    whenElementExist('.sy__outline > .fn__flex-1').then(async el => {
        // 是否正在折叠中
        let closing = false;
        // 监听item鼠标移入事件
        el.addEventListener('mouseover', (event) => {
            if(closing) return;
            if(event.target.nodeType !== Node.ELEMENT_NODE) return;
            const li = event.target.closest('li.b3-list-item');
            const ul = li?.nextElementSibling;
            if(!li || !ul || ul?.tagName !== 'UL') return;
            const toggleBtn = li.querySelector('.b3-list-item__toggle');
            if(!toggleBtn) return;
            const isOpen = toggleBtn.querySelector('svg.b3-list-item__arrow--open');
            if(isOpen) return;
            toggleBtn.click();
        });
        // 监听箭头按钮展开事件
        el.addEventListener('click', (event) => {
            if(event.target.nodeType !== Node.ELEMENT_NODE) return;
            const toggleBtn = event.target.closest('.b3-list-item__toggle');
            if(!toggleBtn) return;
            closing = true;
            const li = toggleBtn.closest('li.b3-list-item');
            const onMouseLeave =  (event) => {
                if(event.target.nodeType !== Node.ELEMENT_NODE) {
                    setTimeout(() => {
                        closing = false;
                        li.removeEventListener('mouseleave', onMouseLeave);
                    }, 3000);
                    return;
                }
                closing = false;
                li.removeEventListener('mouseleave', onMouseLeave);
            };
            li.addEventListener('mouseleave', onMouseLeave);
        });
    });
    // 等待元素渲染完成后执行
    function whenElementExist(selector, bySetTimeout = false, delay = 40) {
        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 {
                    if (bySetTimeout) {
                        setTimeout(checkForElement, delay);
                    } else {
                        requestAnimationFrame(checkForElement);
                    }
                }
            };
            checkForElement();
        });
    }
})();
image.png

留下你的脚步
推荐阅读