nopCommerce中$(this).next的jQuery分类展开脚本为何失效？

• 事件绑定与选择逻辑错位：原JS将点击事件绑定在带.dropdown类的li元素上，逻辑中通过next('a.dropdown-toggle')查找触发链接，但a.dropdown-toggle是li.dropdown的子元素，并非同级节点，选择器完全匹配不到目标。
• 缺失核心状态控制：原代码仅修改aria-expanded属性值，没有实际控制子菜单ul.dropdown-menu的显示/隐藏，无法产生展开效果。
• 未阻止默认跳转：点击分类链接时会直接触发页面跳转，无法停留在当前页面执行展开逻辑。
• 无状态切换逻辑：每次触发都强制将展开状态设为true，无法实现点击收起的交互。

调整后的JS逻辑 #

$(document).ready(function() {
  // 绑定侧边栏下拉分类的点击事件
  $('.sidebar .dropdown-toggle').on('click', function(e) {
    e.preventDefault(); // 阻止分类链接默认跳转行为
    const $trigger = $(this);
    const $subMenu = $trigger.siblings('ul.dropdown-menu');
    const isExpanded = $trigger.attr('aria-expanded') === 'true';

    // 同步更新无障碍属性状态
    $trigger.attr('aria-expanded', !isExpanded);
    // 切换子菜单显隐
    $subMenu.toggleClass('show', !isExpanded);
  });
});

配套基础CSS #

补充样式控制子菜单默认状态，避免页面加载时出现未渲染闪烁：

.sidebar ul.dropdown-menu {
  display: none;
  padding-left: 1.2rem;
  list-style: none;
}
.sidebar ul.dropdown-menu.show {
  display: block;
}

可选交互优化 #

如果需要实现「展开当前分类时自动收起同级其他已展开菜单」，可在点击事件中补充同级状态重置逻辑：

// 重置当前层级下其他展开的菜单
const $parentLevel = $trigger.closest('ul');
$parentLevel.children('li.dropdown').not($trigger.closest('li.dropdown'))
  .find('> .dropdown-toggle').attr('aria-expanded', 'false');
$parentLevel.children('li.dropdown').not($trigger.closest('li.dropdown'))
  .find('> ul.dropdown-menu').removeClass('show');

当前分类列表存在li标签未闭合的DOM结构错误，会导致浏览器解析时节点层级错乱，干扰选择器匹配。建议在分类模板渲染时，严格按规范生成结构：子分类嵌套在父分类li标签内部，同级分类渲染前先闭合上一个li标签。

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