移动端自动触发目录折叠点击事件的JS代码问题求助

问题分析 #

你的代码未生效大概率是这两个原因：

1. window.onload触发时，目录插件的DOM元素还没完全渲染，导致找不到.lwptoc_toggle_label元素
2. 未判断目录当前状态，重复点击可能导致状态混乱，或者插件的切换逻辑需要更精准的触发时机

优化后的代码 #

function handleTocToggle() {
    // 等待DOM完全渲染完成再执行
    document.addEventListener('DOMContentLoaded', function() {
        const toggleBtn = document.querySelector('.lwptoc_toggle_label');
        if (!toggleBtn) return; // 找不到元素直接退出，避免报错

        const isMobile = window.innerWidth <= 768;
        // 检测目录当前状态，不同插件的状态标识可能不同，按需调整
        const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true' || toggleBtn.classList.contains('lwptoc_expanded');
        
        // 移动端默认折叠，桌面端默认展开
        if (isMobile && isExpanded) {
            toggleBtn.click();
        } else if (!isMobile && !isExpanded) {
            toggleBtn.click();
        }
    });

    // 监听窗口尺寸变化，自动适配目录状态
    window.addEventListener('resize', function() {
        const toggleBtn = document.querySelector('.lwptoc_toggle_label');
        if (!toggleBtn) return;

        const isMobile = window.innerWidth <= 768;
        const isExpanded = toggleBtn.getAttribute('aria-expanded') === 'true' || toggleBtn.classList.contains('lwptoc_expanded');
        
        if (isMobile && isExpanded) {
            toggleBtn.click();
        } else if (!isMobile && !isExpanded) {
            toggleBtn.click();
        }
    });
}

handleTocToggle();

关键改进点 #

• 用DOMContentLoaded替代window.onload，确保DOM元素完全生成后再执行代码，触发时机更可靠
• 增加元素存在性检查，避免找不到元素时控制台报错
• 先判断目录当前状态，避免重复点击导致状态反转
• 添加窗口resize监听，用户调整窗口尺寸时自动切换目录状态
• 用querySelector替代getElementsByClassName，获取单个元素更精准（如果页面有多个目录，可改用querySelectorAll遍历处理）

额外排查建议 #

• 按F12打开浏览器开发者工具，切换到Console标签页，查看是否有报错信息
• 检查插件生成的目录元素，确认切换按钮的类名确实是.lwptoc_toggle_label，如果类名不符，替换成实际类名
• 如果插件用自定义属性控制状态（比如data-expanded），调整代码中的状态判断逻辑匹配插件的实际实现

内容的提问来源于stack exchange，提问作者Cosmo