Javascript 将另一个子项添加到父子动态可折叠列表引导

我发现了一个使用jquery和bootstrap（）的动态可折叠列表示例。我需要创建一个类似的列表，但我需要更深一层。所以现在每个列表都有一个父项和一个子项。但是我需要在子列表中有另一个父子关系。所以本质上我可以点击列表一，它会显示一个列表，如果我点击其中一个列表项，它会打开另一个列表。我希望这是有道理的，任何帮助都将不胜感激。谢谢

---JS---

---HTML---

同侧花序

列表1







列表2







列表3







列表4

---

我试着在其中一个孩子的列表中添加另一个列表项，但没有成功。我觉得我需要修复javascript并创建一个新类，但我正在努力解决这个问题。

请显示您尝试过的相关代码/您当前的进度链接到一个“fiddle”站点，其中显示了我尝试过的内容

$(document).ready(function(){

$('label.tree-toggler').click(function (){
  $('.abc1').each(function(){
    if($(this).children('ul.tree').hasClass('in')){
         $(this).children('ul.tree').removeClass('in');
       }
  });
  $(this).parent().children('ul.tree').delay(300).queue(function(next) {
    $(this).addClass('in');
    next();
  });
});

});

<ul class="nav nav-list">
  <li><label class="tree-toggler nav-header">Loreum Ipsum</label>
    <ul class="nav nav-list">
      <li class="abc1"><label class="tree-toggler nav-header">List 1</label>
           <ul class="nav nav-list tree collapse in abc">
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
           </ul>
      </li>
      <li class="abc1"><label class="tree-toggler nav-header ">List 2</label>
         <ul class="nav nav-list tree collapse abc">
           <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
         </ul>
      </li>
      <li class="abc1"><label class="tree-toggler nav-header ">List 3</label>
         <ul class="nav nav-list tree collapse abc">
           <li><a href="#">A</a></li>
             <li><a href="#">B</a></li>
             <li><a href="#">C</a></li>
             <li><a href="#">D</a></li>
         </ul>
     </li>
     <li class="abc1"><label class="tree-toggler nav-header ">List 4</label>
         <ul class="nav nav-list tree collapse abc">
           <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
             <li><a href="#">Loreum Ipsum</a></li>
         </ul>
     </li>
   </ul>
 </li>
</ul>