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

Posted 2023-03-05

【中文标题】WordPress Elementor Pro 仅制作导航菜单小部件项目下拉菜单

【英文标题】：WordPress Elementor Pro make nav menu widget items dropdown only

【发布时间】：2021-11-25 23:24:03

【问题描述】：

我正在使用 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 出现之前执行，但我不确定。

【参考方案1】：

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