jQuery折叠菜单从JSON加载仅显示单个子菜单问题及解决

问题原因 #

你的折叠菜单逻辑里，使用了$(this).next('dd')来定位子菜单。next()方法只会匹配当前元素紧挨着的下一个同级元素，而Project 1下面有3个连续的<dd>标签，所以点击时只会触发第一个<dd>的显示/隐藏，剩下两个子菜单不会被处理。

解决方法 #

把所有操作next('dd')的代码，替换成nextUntil('dt')。nextUntil('dt')会选中当前元素之后、直到遇到下一个<dt>之前的所有同级元素，这样就能一次性选中当前项目下的所有子菜单。

修改后的代码 #

var abc = [
{
project: {
  projectName: 'Project 1',
},
module: [{
  moduleName: "A"
},
{
  moduleName: "B"
},
{
  moduleName: "C"
}]
},
{
project: {
  projectName: 'Project 2'
},
module: [{
  moduleName: "D"
}]
},
{
project: {
  projectName: 'Project 3'
},
module: [{
  moduleName: "E"
},
{
  moduleName: "F"
}]
}];

for(var i=0; i<abc.length; i++) {
    var menu = '<dt><div class="icon"><i class="fa-regular fa-server"></i></div><div class="menu-name">' + abc[i].project.projectName + '</div><span class="more"><i class="fa-regular fa-angle-right"></i></span></dt>'; 

    for(var j=0; j<abc[i].module.length; j++) {
      menu += '<dd><a href="">' + abc[i].module[j].moduleName + '</a></dd>';
    }
    $(".collapsable").append(menu);
  }
  
  var speed = 200;
// 同步修改初始化展开逻辑
$('dt.expanded').nextUntil('dt').slideDown(speed);

$('dt').on('click', function () {
  var that = $(this);

  // Expandable
  if (that.parent().hasClass('expandable')) {
    that.toggleClass('expanded').nextUntil('dt').slideToggle(speed);
  } 
  // Collapsable
  else if (that.parent().hasClass('collapsable')) {
    if (!that.hasClass('expanded')) {
      that.siblings('dt').removeClass('expanded').nextUntil('dt').slideUp(speed);
    }
    that.toggleClass('expanded').nextUntil('dt').slideToggle(speed);
  } 
  // Standard
  else {
    if (!that.hasClass('expanded')) {
      that.siblings('dt').removeClass('expanded').nextUntil('dt').slideUp(speed);
      that.toggleClass('expanded').nextUntil('dt').slideToggle(speed);
    }
  }
});

补充说明 #

• nextUntil('dt')会精准选中当前项目下的所有子菜单，不会干扰其他项目的菜单状态
• 原初始化展开的代码也需要同步修改，否则默认展开的项目同样只会显示第一个子菜单

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