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 代码才能使其按预期工作。

Magento 2 菜单小部件

Magento 2 menu widget

magento

magento2