时间戳

首页 > 解决方案 > WordPress Elementor Pro 仅制作导航菜单小部件项目下拉菜单

javascript - WordPress Elementor Pro 仅制作导航菜单小部件项目下拉菜单

问题描述

我正在使用 Elementor Pro 在 WordPress 中重新创建一个 Joomla 站点。我正在重建的网站有一个主菜单栏，其中许多菜单项都有子菜单下拉菜单。导航菜单小部件使我能够重新创建它，除了一件重要的事情。Joomla 站点的具有子菜单下拉菜单的菜单项本身不会将您带到不同的页面。它们仅用于允许出现子菜单。

这是与以下示例一起使用的图像：nav-menu

例如，如果一个菜单项（例如“捐赠”）没有子菜单下拉菜单，那么单击它会将您带到它的页面（例如在本例中为捐赠页面）。但是如果一个菜单项（例如“联系人”）确实有一个子菜单下拉菜单，那么单击它不会将您带到不同的页面，但它的子菜单下拉菜单中的项目（例如在这种情况下是“访问”和“就业”）将带您到不同的页面。

据我所知，导航菜单小部件无法直接使菜单项专门用于允许出现下拉子菜单。所以我想知道是否有办法解决这个问题。

我尝试的第一件事是将此代码添加到导航菜单小部件的自定义 css 部分：

selector .has-submenu {
   pointer-events: none;
}

但这也会禁用子菜单下拉菜单。

我尝试的第二件事是使用以下代码创建一个 HTML 小部件：

<script>
var anchorsWithSubMenus = document.querySelectorAll(".has-submenu");
    for (var i = 0; i < anchorsWithSubMenus.length; i++) {
        anchorsWithSubMenus[i].href = "#"
    }
</script>

但这似乎没有任何作用。我认为这是因为代码在导航菜单 HTML 出现之前执行，但我不确定。

标签： javascripthtmlcsswordpresselementor

解决方案

我意识到在我的网站仪表板上的外观 > 菜单下，我可以添加自定义链接的菜单项。所以我添加了指向“#”的自定义链接，并为他们提供了我需要的文本。

推荐阅读