如何在Elementor中实现点击锚链接后自动关闭导航菜单

如何在Elementor中实现点击锚链接后自动关闭导航菜单

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

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

  1. 登录WordPress仪表板
  2. 导航到Elementor模板 > 已保存的模板
如何在Elementor中实现点击锚链接后自动关闭导航菜单
  1. 找到你的单个帖子模板并点击“Edit with Elementor”。

步骤 2:添加HTML元素

  1. 在模板编辑器中,找到你需要添加代码的部分,通常是页面的末尾。
  2. 拖放一个HTML元素到模板中。
如何在Elementor中实现点击锚链接后自动关闭导航菜单

步骤 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. 保存并发布代码。
如何在Elementor中实现点击锚链接后自动关闭导航菜单

总结:

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/11104/

(0)
上一篇 2024年 6月 8日 下午6:29
下一篇 2024年 6月 9日 下午12:46

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
为方便全球用户注册登录,我们已取消电话登录功能。如遇登录问题,请联系客服协助绑定邮箱。