嘿，我刚好碰到过类似的问题！你的核心需求是点击树形菜单的子菜单项时，保持当前展开的子菜单不收起对吧？问题出在Nestable插件的默认行为上——它会把.dd-handle区域内的点击事件都当作折叠/展开的触发信号，哪怕你点击的是里面的子链接。

你现在只阻止了mousedown事件的冒泡，但有时候click事件还是会“漏网”触发插件的折叠逻辑。咱们可以调整一下事件监听的方式，同时覆盖click和mousedown事件，彻底阻止事件冒泡到插件的折叠处理函数：

jQuery(function($) {
  // 初始化Nestable树形菜单
  $('.dd').nestable();

  // 给子链接同时绑定click和mousedown事件，阻止冒泡
  $('.dd-handle a').on('click mousedown', function(e) {
    e.stopPropagation();
    // 注意：如果你的子链接需要正常跳转（比如打开新页面/路由），不要加e.preventDefault()
    // 只有在不需要跳转时才添加这行：e.preventDefault();
  });

  // 初始化tooltip组件
  $('[data-rel="tooltip"]').tooltip();
});

额外方案：从根源区分折叠按钮和菜单项 #

如果上面的方法还是有问题，咱们可以换个思路——把折叠/展开的动作限制在专门的按钮上，而不是整个菜单项区域。初始化Nestable时自定义展开/折叠按钮的HTML，让只有点击按钮才会触发折叠：

jQuery(function($) {
  $('.dd').nestable({
    // 自定义展开按钮
    expandBtnHTML: '<span class="nestable-expand" data-action="expand">+</span>',
    // 自定义折叠按钮
    collapseBtnHTML: '<span class="nestable-collapse" data-action="collapse">-</span>'
  });

  // 子链接的点击事件处理
  $('.dd-handle a').on('click', function(e) {
    e.stopPropagation();
  });

  $('[data-rel="tooltip"]').tooltip();
});

这样设置后，只有点击你自定义的+/-按钮才会展开/折叠子菜单，点击菜单项的链接完全不会触发折叠动作，从根源上解决了问题。

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