如何将Typo3网站mmenu一级菜单项从<span>改为可点击超链接

嘿，我之前在项目里也碰到过mmenu里非链接元素没法触发点击的情况，结合你的场景（Typo3生成的一级菜单），给你几个可行的解决思路：

1. 优先替换为语义化的标签（推荐） #

mmenu默认是给<a>标签绑定点击交互的，所以最直接的方法是让Typo3生成菜单时用<a>代替<span>。即使菜单项不需要跳转链接，也可以给<a>加个占位的href（比如href="#"或者href="javascript:void(0)"），这样既符合语义化，也能让mmenu识别并绑定点击事件。

你可以在TypoScript里调整菜单的渲染配置：

lib.yourMenuName = HMENU
lib.yourMenuName {
  1 = TMENU
  1 {
    NO {
      wrapItemAndSub = <li>|</li>
      stdWrap.htmlSpecialChars = 1
      # 将原本的span替换为a标签，设置占位href
      stdWrap.wrap = <a href="#">|</a>
    }
  }
}

2. 手动给绑定点击事件 #

如果因为项目限制没法修改HTML结构，可以在mmenu初始化完成后，手动给<span>元素绑定点击逻辑。注意要在mmenu的回调里绑定，因为mmenu会动态生成DOM元素，确保元素存在后再绑定事件：

// 初始化mmenu
const menuInstance = $("#my-menu").mmenu({
  "extensions": [ "theme-topit", "fullscreen" ],
  "autoHeight": { "height": "highest" },
  "navbars": [ { "position":"top", "height": 2 } ]
}, {
  offCanvas: {
    pageSelector: "#page" // 根据你的页面结构调整选择器
  }
});

// 菜单打开后绑定点击事件
menuInstance.on('opened.mm', function() {
  $('.mm-listview li span').off('click').on('click', function() {
    // 这里写你需要的点击逻辑，比如关闭菜单、执行跳转等
    $("#my-menu").trigger('close.mm');
    // 示例：获取菜单项文本
    const menuText = $(this).text().trim();
    console.log(`点击了菜单：${menuText}`);
  });
});

这里用off('click')是为了避免重复绑定事件，防止多次点击触发多次回调。

3. 修改mmenu配置，指定可点击元素 #

部分版本的mmenu支持配置listview的点击选择器，你可以直接指定<span>作为可点击元素，让插件自动绑定交互：

$("#my-menu").mmenu({
  "extensions": [ "theme-topit", "fullscreen" ],
  "autoHeight": { "height": "highest" },
  "navbars": [ { "position":"top", "height": 2 } ],
  "listview": {
    "selectable": true,
    "click": {
      "selector": "span" // 设置可点击的元素为span
    }
  }
});

这个方法需要确认你使用的mmenu版本是否支持该配置项，如果是较新版本的话应该没问题。

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