jQuery collapsable function menu from JSON not show all sub menu-CodePudding

I have jQuery collapsable function. All data menu getting from JSON. You can check the demo below.

My question, for example Project 1 has 3 menus, but why when I click on that it's only show 1 menu?

Any idea how to solve it?

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 ><i ></i></div><div >'   abc[i].project.projectName   '</div><span ><i ></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   dd').slideDown(speed);

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


  // Expandable
  if (that.parent().hasClass('expandable')) {

    that.toggleClass('expanded').next('dd').slideToggle(speed);

    // Collapsable
  } else if (that.parent().hasClass('collapsable')) {

    if (!that.hasClass('expanded')) {
      that.siblings('dt').removeClass('expanded').next('dd').slideUp(speed);
    }

    that.toggleClass('expanded').next('dd').slideToggle(speed);
    // Standard
  } else {
    // make sure its not collapsing itself and reappearing right after.
    if (!that.hasClass('expanded')) {

      that.siblings('dt').removeClass('expanded').next('dd').slideUp(speed);
      that.toggleClass('expanded').next('dd').slideToggle(speed);
    }
  }


});

dd {
  display: none;
  font-size: 13px;
  margin: 0;
  color: #ffffff;
  padding: 10px;
  border-radius: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<dl >
</dl>

CodePudding user response：

Added a <p> tag around the <dd> tag. .next( function only selects the first dd element

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 ><i ></i></div><div >'   abc[i].project.projectName   '</div><span ><i ></i></span></dt>'; 
menu  ='<dd>';
    for(var j=0; j<abc[i].module.length; j  ) {

      menu  = '<p><a href="">'   abc[i].module[j].moduleName   '</a></p>';


    }
    menu  ='</dd>';

    $(".collapsable").append(menu);

  }
  
  
  var speed = 200;
$('dt.expanded   dd').slideDown(speed);

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


  // Expandable
  if (that.parent().hasClass('expandable')) {

    that.toggleClass('expanded').next('dd').slideToggle(speed);

    // Collapsable
  } else if (that.parent().hasClass('collapsable')) {

    if (!that.hasClass('expanded')) {
      that.siblings('dt').removeClass('expanded').next('dd').slideUp(speed);
    }

    that.toggleClass('expanded').next('dd').slideToggle(speed);
    // Standard
  } else {
    // make sure its not collapsing itself and reappearing right after.
    if (!that.hasClass('expanded')) {

      that.siblings('dt').removeClass('expanded').next('dd').slideUp(speed);
      that.toggleClass('expanded').next('dd').slideToggle(speed);
    }
  }


});

dd {
  display: none;
  font-size: 13px;
  margin: 0;
  color: #ffffff;
  padding: 10px;
  border-radius: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<dl >
</dl>