如何使用Jquery制作Multilevel Accordian with checkbox？

Question

我想做这样的事情：

但到目前为止，我只能制作两级手风琴而且我并不完全知道并确定如何进一步编码，以便它具有3,4或甚至5级的能力来检查/取消选中复选框。

这些或多或少是我到目前为止所得到的：

HTML

<ul class="accordion">      
  <li>
    <div><input type="checkbox" class="parentCheckBox" /><a href="#">EU --- Europa</a></div>
    <ul class="accordion">
      <li>
        <div><input type="checkbox" class="childCheckBox"><a href="#">EU-DE --- Germany</a></div>
      </li>
      <li>
        <div><input type="checkbox" class="childCheckBox"><a href="#">EU-ES --- Espana</a></div>
        <ul class="accordion">
          <div><input type="checkbox" class="childCheckBox"><a href="#">EU-ES-AN --- Andalusia</a></div>
          <div><input type="checkbox" class="childCheckBox"><a href="#">EU-ES-AR --- Aragon</a></div>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <div><input type="checkbox" class="parentCheckBox" /><a href="#">NA --- North America</a></div>
  </li> 
  <li>
    <div><input type="checkbox" class="parentCheckBox" /><a href="#">LA --- America Latina</a></div>
  </li>    
</ul>

CSS：

.accordion {
    list-style: none;
    padding: 0 0 0 0;
    width: 170px;
}
.accordion div {
    display: block;
    background-color: #333;
    font-weight: bold;
    margin: 1px;
    cursor: pointer;
    padding: 5 5 5 7px;
    list-style: circle;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.accordion ul {
    list-style: none;
    padding: 0 0 0 0;
}
.accordion ul{
    display: none;
}
.accordion ul li {
    font-weight: normal;
    cursor: auto;
    background-color: #fff;
    padding: 0 0 0 7px;
}
.accordion a {
    text-decoration: none;
    color:#fff;
}
.accordion a:hover {
    text-decoration: underline;
}

JS：

$(function(){


  $(".accordion > li > div").click(function(){
    $(".accordion > li").toggleClass("display")
    if(false == $(this).next().is(':visible')) {
        $('.accordion ul').slideUp(300);
    }
    $(this).next().slideToggle(300);
  });


  //clicking the parent checkbox should check or uncheck all child checkboxes
  $(".parentCheckBox").on('click', function() {
      $(this).closest('ul').find('.childCheckBox').prop('checked', this.checked);
  }); 

});

请帮忙！谢谢:)）