如何用jQuery实现动态侧边菜单的面包屑式可点击返回按钮

实现方案 #

第一步：调整HTML结构 #

给左侧菜单容器顶部新增专属的面包屑展示容器，避免直接插入文本无法绑定点击事件，原有菜单内容保持不变：

<div class="secondary">
  <!-- 新增面包屑容器 -->
  <div class="breadcrumb"></div>
  <ul id="menu-inner-page-menu" class="menu">
    <!-- 原有菜单内容保持不变 -->
  </ul>
</div>

第二步：补充面包屑样式 #

在原有CSS基础上新增以下样式，适配面包屑展示和交互效果，同时调整子菜单内边距避免内容被面包屑遮挡：

.breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 12px;
  background: #f8f8f8;
  z-index: 999;
  border-bottom: 1px solid #eaedf1;
  box-sizing: border-box;
}
.breadcrumb-item {
  cursor: pointer;
  color: #333;
}
.breadcrumb-item:hover {
  color: #2d7ff9;
}
.breadcrumb-separator {
  margin: 0 5px;
  color: #999;
}
/* 调整原有子菜单的内边距，适配面包屑高度 */
.menu-item-has-children .sub-menu {
  padding-top: 50px;
}

第三步：重写JS交互逻辑 #

替换原有JS代码，实现动态生成可点击面包屑、点击返回对应层级菜单的功能：

// 初始化隐藏所有子菜单
$('.menu-item-has-children .sub-menu').css({'left': '-320px'});

// 菜单点击事件
$('.menu-item-has-children > a').click(function() {
  const $parentLi = $(this).parent();
  const menuId = $parentLi.attr('id');
  const menuText = $(this).text();
  // 展开当前子菜单
  $parentLi.children('.sub-menu').css({'left': '0px'});

  // 组装面包屑项，存储对应菜单ID
  const $breadcrumbItem = $('<span class="breadcrumb-item"></span>').text(menuText).data('menu-id', menuId);
  
  // 面包屑拼接逻辑：如果不是第一层，前面加分隔符
  if($('.breadcrumb').children().length > 0) {
    $('.breadcrumb').append('<span class="breadcrumb-separator">-></span>');
  }
  $('.breadcrumb').append($breadcrumbItem);
});

// 面包屑点击返回事件
$(document).on('click', '.breadcrumb-item', function() {
  const targetMenuId = $(this).data('menu-id');
  // 收回当前点击项对应层级以下的所有子菜单
  $(`.menu-item-has-children[id="${targetMenuId}"] .sub-menu`).css({'left': '-320px'});
  // 删除当前点击项之后的所有面包屑内容
  $(this).nextAll().remove();
  // 清理多余的分隔符
  if($('.breadcrumb').children().last()?.hasClass('breadcrumb-separator')) {
    $('.breadcrumb').children().last().remove();
  }
});

功能说明 #

• 所有面包屑完全根据点击动态生成，没有任何硬编码静态值，适配任意层级的动态菜单
• 点击任意层级的面包屑，都会退回对应层级的菜单，同时自动清理后面的面包屑路径
• 子菜单展开、收起的动画效果和原有逻辑完全兼容

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