如何将Magento 2移动端菜单改为手风琴式展开折叠行为

步骤1：修改菜单模板，阻止父分类跳转 #

找到主题中负责渲染移动端菜单的模板文件（常见路径：app/design/frontend/[你的主题厂商]/[主题名]/Magento_Catalog/templates/navigation/menu.phtml 或 Magento_Theme/templates/html/responsive/menu.phtml），找到输出分类链接的代码块，修改为以下逻辑：

<?php $_menuItem = /* 对应循环中的菜单项变量，根据实际代码调整 */ ?>
<?php if ($_menuItem->hasChildren()): ?>
    <span class="mobile-menu-trigger"><?= $block->escapeHtml($_menuItem->getName()) ?></span>
    <!-- 隐藏父分类的跳转链接，仅保留无子类的分类跳转 -->
    <a href="<?= $block->escapeUrl($_menuItem->getUrl()) ?>" class="mobile-category-link" style="display: none;">
        <?= $block->escapeHtml($_menuItem->getName()) ?>
    </a>
<?php else: ?>
    <a href="<?= $block->escapeUrl($_menuItem->getUrl()) ?>"
       <?php if ($_menuItem->getIsOpenInNewWindow()): ?>
           target="_blank" rel="noopener"
       <?php endif; ?>
    >
        <?= $block->escapeHtml($_menuItem->getName()) ?>
    </a>
<?php endif; ?>

注：如果模板中原本就有target="_blank"属性，直接移除或仅在无子分类时保留即可。

步骤2：添加手风琴展开折叠的JS逻辑 #

找到主题的菜单相关JS文件（常见路径：app/design/frontend/[你的主题厂商]/[主题名]/web/js/menu.js 或 web/js/responsive-menu.js），添加以下代码：

require(['jquery'], function($) {
    // 点击触发子菜单展开/折叠
    $(document).on('click', '.mobile-menu-trigger', function(e) {
        e.preventDefault();
        var $parentItem = $(this).closest('.level0'); // 父分类容器，根据实际HTML结构调整类名
        $parentItem.toggleClass('active');
        $parentItem.find('.submenu').slideToggle(300); // 子菜单容器，需匹配实际DOM中的类名
    });

    // 可选：点击菜单外部关闭所有展开的子菜单
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.mobile-menu').length) {
            $('.level0.active').removeClass('active');
            $('.submenu').slideUp(300);
        }
    });
});

步骤3：添加CSS样式控制显示 #

在主题的CSS文件（如app/design/frontend/[你的主题厂商]/[主题名]/web/css/source/_module.less 或 css/styles.css）中添加移动端专属样式：

@media only screen and (max-width: 768px) {
    /* 子菜单默认隐藏 */
    .mobile-menu .level0 .submenu {
        display: none;
        padding-left: 1.2rem;
        margin-top: 0.5rem;
    }

    /* 激活状态下显示子菜单 */
    .mobile-menu .level0.active .submenu {
        display: block;
    }

    /* 触发元素样式，添加展开/折叠箭头 */
    .mobile-menu-trigger {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 0;
    }

    .mobile-menu-trigger::after {
        content: '+';
        font-size: 1.2rem;
        transition: transform 0.3s ease;
    }

    .level0.active .mobile-menu-trigger::after {
        transform: rotate(45deg);
    }
}

步骤4：清除缓存并部署静态文件 #

执行Magento命令更新静态资源并清理缓存：

bin/magento cache:clean
bin/magento setup:static-content:deploy -f

提示：如果使用第三方主题，文件路径可能略有差异，需根据主题的实际目录结构调整对应文件。

内容的提问来源于stack exchange，提问作者CHARAF Designer