Tag: WordPress导航菜单优化

在Elementor中设置点击锚链接后关闭目录（如折叠菜单或导航菜单），可以使用一些自定义代码来实现。以下是具体步骤：

步骤 1：编辑单个帖子模板

1. 登录WordPress仪表板。
2. 导航到Elementor模板 > 已保存的模板。

3. 找到你的单个帖子模板并点击“Edit with Elementor”。

步骤 2：添加HTML元素

1. 在模板编辑器中，找到你需要添加代码的部分，通常是页面的末尾。
2. 拖放一个HTML元素到模板中。

步骤 3：粘贴自定义JavaScript代码

在HTML元素中，粘贴以下JavaScript代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.elementor-table-of-contents a'); // 替换 .elementor-table-of-contents 为你的目录类

    menuItems.forEach(function(menuItem) {
        menuItem.addEventListener('click', function() {
            var menuToggle = document.querySelector('.elementor-menu-toggle'); // 替换 .elementor-menu-toggle 为你的菜单切换按钮类

            if (menuToggle) {
                menuToggle.click(); // 触发菜单关闭
            }
        });
    });
});
</script>

详细说明

1. 类名匹配：
   • .elementor-table-of-contents 是目录的类名，你需要用实际的目录类名替换它。
   • .elementor-menu-toggle 是菜单切换按钮的类名，你需要用实际的菜单切换按钮类名替换它。

   你可以通过浏览器的开发者工具（F12）检查实际使用的类名。

2. 事件监听：
   • document.addEventListener('DOMContentLoaded', function() { ... }); 确保代码在页面完全加载后执行。
   • menuItem.addEventListener('click', function() { ... }); 为每个目录链接添加点击事件监听器。
3. 触发菜单关闭：
   • menuToggle.click(); 模拟点击菜单切换按钮，从而关闭菜单。

步骤 4：保存并发布

1. 为你的自定义代码命名（如“锚链接关闭目录”）。
2. 选择“整个网站”作为代码的应用范围。
3. 保存并发布代码。

总结：

通过在单个帖子模板中添加自定义JavaScript代码，你可以实现在Elementor点击锚链接后自动关闭目录。关键步骤包括编辑模板、添加HTML元素和粘贴代码。确保正确匹配类名，以确保功能正常工作。此设置不仅优化了导航菜单的使用，还增强了网站的整体用户体验和交互性。选择这种方法有助于保持网站的专业性和功能性。