Como implementar o fecho automático do menu de navegação depois de clicar numa ligação de âncora no Elementor

Como implementar o fecho automático do menu de navegação depois de clicar numa ligação de âncora no Elementor

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

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

  1. iniciar sessãoWordPress仪表板.
  2. 导航到Elementormodelo > 已保存的模板.
Como implementar o fecho automático do menu de navegação depois de clicar numa ligação de âncora no Elementor
  1. 找到你的单个帖子模板并点击“Editar com o Elementor".

步骤 2:添加HTML元素

  1. 在模板编辑器中,找到你需要添加代码的部分,通常是页面的末尾。
  2. 拖放一个HTML元素到模板中。
Como implementar o fecho automático do menu de navegação depois de clicar numa ligação de âncora no 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. 保存并发布代码。
Como implementar o fecho automático do menu de navegação depois de clicar numa ligação de âncora no Elementor

Resumo:

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


Contactar-nos
Não consegue ler o artigo? Contacte-nos para obter uma resposta gratuita! Ajuda gratuita para sítios pessoais e de pequenas empresas!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correio eletrónico: info@361sale.com
Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados
Publicado por photon fluctuations, retweetado com atribuição:https://www.361sale.com/pt/11104/

Como (0)
Anterior Terça-feira, 8 de junho de 2024, 18:29 horas.
Seguinte Data de nascimento: 9 de junho de 2024, 12:46 p.m.

Recomendado

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Contactar-nos

020-2206-9892

QQ咨询:1025174874

Correio eletrónico: info@361sale.com

Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados

Serviço ao cliente WeChat
Para facilitar o registo e o início de sessão de utilizadores globais, cancelámos a função de início de sessão por telefone. Se tiver problemas de início de sessão, contacte o serviço de apoio ao cliente para obter assistência na ligação do seu endereço de correio eletrónico.