如何修改slide-menu库，分离父菜单文本与展开箭头的点击行为？

我来帮你搞定这个问题~先拆解下原库的核心逻辑：原代码里，当检测到<a>标签后存在子菜单<ul>时，会给这个<a>绑定click事件阻止默认跳转，再把箭头追加到<a>的内容里——这样点击整个<a>（包括文本和箭头）都会触发菜单钻取。

你现在把箭头从<a>里移除，自己加了独立的.gotToChildren箭头标签，但这个新标签并没有绑定钻取逻辑，所以钻取功能自然失效了。咱们可以通过以下调整实现需求：

具体修改步骤 #

1. 取消原<a>标签的默认行为阻止：既然要让父文本点击执行原有操作，就删掉原代码里阻止默认的那一行代码。
2. 给独立箭头绑定钻取逻辑：复用原库的钻取逻辑，给新添加的箭头标签绑定点击事件，触发菜单钻取。
3. 保留子菜单初始化的其他逻辑：比如返回按钮的生成逻辑可以原样保留。

修改后的_setupSubmenus方法代码如下：

_setupSubmenus() { 
  this._anchors.each((i, anchor) => { 
    anchor = $(anchor); 
    if (anchor.next('ul').length) { 
      // 移除默认阻止：让父文本点击执行原有操作
      // anchor.click(function (ev) { ev.preventDefault(); }); 

      // 保留原标题处理逻辑（你已将submenuLinkAfter设为空）
      let anchorTitle = anchor.text(); 
      anchor.html(this.options.submenuLinkBefore + anchorTitle + this.options.submenuLinkAfter); 

      // 添加独立箭头按钮
      const arrowLink = $('<a class="gotToChildren" href="#"> &gt; </a>');
      anchor.next('ul').before(arrowLink);

      // 给箭头绑定钻取逻辑：复用原库的菜单切换逻辑
      arrowLink.click((ev) => {
        ev.preventDefault();
        // 触发原<a>标签的click事件，激活库的钻取功能
        anchor.trigger('click');
      });

      // 保留返回按钮生成逻辑
      if (this.options.showBackLink) { 
        let backLink = $('<a href class="slide-menu-control" data-action="back">' + anchorTitle + '</a>'); 
        backLink.html(this.options.backLinkBefore + backLink.text() + this.options.backLinkAfter); 
        anchor.next('ul').prepend($('<li>').append(backLink)); 
      } 
    } 
  }); 
}

效果说明 #

修改完成后，点击父菜单的文本会执行它原本的跳转/自定义操作，点击箭头则会触发菜单钻取，完美实现了功能分离。

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