Drupal 9 Olivero主题移动端主菜单子菜单显示实现方案

不需要创建自定义模块，通过子主题的自定义脚本和样式即可实现，具体步骤如下：

1. 添加自定义JavaScript代码 #

在你的Olivero子主题目录下创建js/custom-mobile-menu.js文件，写入以下代码：

(function (Drupal, drupalSettings, once) {
  // 定义展开子菜单的函数
  const expandSubmenus = () => {
    // 仅在移动端视图下执行
    if (window.innerWidth < 780) {
      once('mobile-submenu-expand', '.primary-nav__button-toggle').forEach(button => {
        // 如果按钮未展开，则触发点击
        if (button.getAttribute('aria-expanded') === 'false') {
          button.click();
          // 同步更新关联元素的类和属性
          const targetId = button.getAttribute('aria-controls');
          const submenu = document.getElementById(targetId);
          const carrot = button.nextElementSibling;
          if (submenu) submenu.classList.add('is-active-menu-parent');
          if (carrot) carrot.classList.add('is-active-menu-parent');
        }
      });
    } else {
      // 桌面视图下恢复默认状态（可选）
      once('mobile-submenu-expand', '.primary-nav__button-toggle').forEach(button => {
        if (button.getAttribute('aria-expanded') === 'true') {
          button.click();
          const targetId = button.getAttribute('aria-controls');
          const submenu = document.getElementById(targetId);
          const carrot = button.nextElementSibling;
          if (submenu) submenu.classList.remove('is-active-menu-parent');
          if (carrot) carrot.classList.remove('is-active-menu-parent');
        }
      });
    }
  };

  // 页面加载时执行
  Drupal.behaviors.mobileSubmenuExpand = {
    attach: function (context) {
      expandSubmenus();
      // 监听窗口 resize 事件
      window.addEventListener('resize', expandSubmenus);
    }
  };
})(Drupal, drupalSettings, once);

2. 添加自定义CSS样式 #

在子主题的css/custom-mobile-menu.css文件中添加以下样式，确保子菜单默认显示：

@media (max-width: 779px) {
  .primary-nav__menu--level-2.is-active-menu-parent {
    display: block !important;
  }
}

3. 在子主题库中引入资源 #

编辑子主题的[子主题名称].libraries.yml文件，添加以下配置：

custom-mobile-menu:
  js:
    js/custom-mobile-menu.js: {}
  css:
    component:
      css/custom-mobile-menu.css: {}
  dependencies:
    - core/drupal
    - core/once

最后，在子主题的info.yml文件中确保该库被加载，或者通过主题设置添加到全局资源中。

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