手风琴控件主分类Href无法跳转问题排查与修复请求

这个问题我太熟悉了——你的主分类链接之所以失效，核心原因是Bootstrap折叠（Collapse）组件会拦截带有data-toggle="collapse"属性的<a>标签的默认点击事件，优先触发手风琴的展开/收起动作，而不是执行链接跳转。下面给你两种实用的解决方案：

方案一：拆分触发元素与跳转链接（推荐） #

把原来的单个<a>标签拆分成「跳转链接」和「折叠触发按钮」两个独立元素，让用户点击分类文字时跳转，点击箭头时展开子分类，彻底避免冲突：

<!-- 主分类容器：用div包裹链接和触发按钮 -->
<div class="nav-link collapsed d-flex justify-content-between align-items-center">
  <!-- 真正的跳转链接：负责跳转到全部分类商品页面 -->
  <a href="../account/MarketPlace.aspx?Category=Category1" class="text-decoration-none">--category</a>
  <!-- 折叠触发按钮：仅负责展开/收起子分类 -->
  <button class="sidenav-collapse-arrow border-0 bg-transparent" 
          data-toggle="collapse" 
          data-target="#collapseLayouts" 
          aria-expanded="false" 
          aria-controls="collapseLayouts">
    <!-- 这里可以保留你的箭头样式，比如图标或空白占位 -->
  </button>
</div>

<!-- 子分类区域（保持原结构不变） -->
<div class='collapse' id='collapseLayouts' data-parent='#accordionSidenav'>
  <nav class='sidenav-menu-nested nav accordion' id='accordionSidenavLayout'>
    <a class='nav-link' href='../account/MarketPlace.aspx?Category=Category1&SubCategory=subcat1'>-subcategory1</a>
    <a class='nav-link' href='../account/MarketPlace.aspx?Category=Category1&SubCategory=subcat2'>-subcategory2</a>
    <a class='nav-link' href='../account/MarketPlace.aspx?Category=Category1&SubCategory=subcat3'>-subcategory3</a>
  </nav>
</div>

关键调整说明： #

1. 用div替代原来的<a>作为折叠容器，避免默认跳转行为被拦截
2. 单独的<a>标签负责跳转，修正了原代码中href参数不规范的问题（原?Category1改为?Category=Category1，和子分类参数格式统一）
3. 用无样式按钮触发折叠，保持原有箭头交互的视觉效果

方案二：通过JavaScript区分点击区域（适合不改动HTML结构的场景） #

如果不想调整HTML结构，可以通过JS判断用户点击的是分类文字还是箭头区域，仅在点击文字时执行跳转：

// 监听主分类链接的点击事件
$('.nav-link.collapsed').on('click', function(e) {
  // 判断点击目标是否是箭头元素
  if (!$(e.target).hasClass('sidenav-collapse-arrow')) {
    // 执行链接跳转
    window.location.href = $(this).attr('href');
    // 阻止折叠组件的默认行为
    e.stopPropagation();
    return false;
  }
  // 点击箭头时，正常执行折叠逻辑
});

注意事项： #

• 确保原代码中主分类的href参数正确（修正为../account/MarketPlace.aspx?Category=Category1）
• 如果使用jQuery，要确保页面已加载jQuery和Bootstrap的JS文件

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