Magento 2 菜单小部件

Question

我在使用原生 Magento 菜单小部件时遇到了一些问题 - https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_menu.html

例如，我已经从 devdocs 复制了这段代码并粘贴到 .phtml 文件中：

<nav class="navigation" data-action="navigation">
    <ul id="menu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "delay": 200, "position":{"my":"left top","at":"left+10 top+30"}}}'>
        <li class="level0 level-top ui-menu-item">Toys</li>
        <li class="level0 level-top parent ui-menu-item">Electronics
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all">
                <li class="ui-menu-item"><a href="#">Home Entertainment</a></li>
                <li class="ui-menu-item"><a href="#">Routers</a></li>
            </ul>
        </li>
        <li class="level0 level-top ui-menu-item">Music
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all">
                <li class="ui-menu-item">
                    <a href="#">Alternative</a>
                </li>
                <li class="ui-menu-item">
                    <a href="#">Classic</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

菜单小部件可在网站上使用，但不能正常使用。当页面加载时，我尝试通过将鼠标悬停在顶级菜单上打开二级菜单（.submenu），第一次悬停时它不起作用，只有第二次悬停，然后是所有后续。

也许我正在跳过一些 js 初始化或类似的事情？

Answer 1

在 devdoc 中，此代码只是一个示例，它根本无法初始化菜单。您需要添加 js 和 css 代码才能使其按预期工作。