HTML 折叠/展开树无法按预期工作

Question

我想折叠具有多层次结构的类别树。我从堆栈中尝试了很多答案，但它不起作用。谁能帮帮我吗？

实际结果 ：

• 首先显示测试 1 和测试 3

• 然后，单击测试 1 => 单击测试 2 和测试 8 应显示

• 然后，单击测试 2 => 单击测试 4 和测试 7 应显示

• 等等。

更新 ：

片段：

$(document).ready(function() {

  var getChild = $('ul.categories').children('li');

  getChild.each(function(i, v) {

    if ($(v).data('parentcategory') == "0") {

      $(v).addClass('active-collapse');

    }

  });

  $('div.categories-list li').click(function() {

    var main_category = $(this).data('parentcategory');

    $('ul.sub', $(this).parent()).eq(0).toggle();

  });

});

div.categories-list {

  width: 30%;

  margin-bottom: 20px;

  float: left;

}

ul.categories,

ul.sub {

  border-top: 1px solid #c3cfd9;

  margin: 0;

  padding: 0;

}

ul.categories li {

  margin: 0;

  padding: 0;

  list-style: none;

}

ul.categories li a {

  display: block;

  max-width: 100%;

  padding: 10px 5px 10px 10px;

  font-size: 13px;

  background: #FCFCFC;

  color: #3f729b;

  border: 1px solid #c3cfd9;

  border-top: 0px !important;

  text-decoration: none;

  font-weight: 700;

  cursor: pointer;

  transition: all 150ms ease-out;

  -webkit-transition: all 150ms ease-out;

}

ul.categories li a:hover {

  text-indent: 5px;

}

ul.sub {

  display: none;

}

.activeUi {

  display: block;

}

Answer 1

是的，你对 ul li 的结构有一些问题。请看我的演示。您可以将您的类和属性添加到您的遗嘱中。它不会妨碍。document.querySelector('.categories').addEventListener('click', (e) => {&nbsp; const el = e.target;&nbsp; const sibling = el.nextSibling.nextSibling;&nbsp; if (el && el.className == 'toggle' && sibling) {&nbsp; &nbsp; sibling.classList.toggle('show');&nbsp; }});div.categories-list {&nbsp; width: 50%;&nbsp; margin-bottom: 20px;&nbsp; float: left;}ul.categories,ul.sub {&nbsp; border-top: 1px solid #c3cfd9;&nbsp; margin: 0;&nbsp; padding: 0;}ul.categories li {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; list-style: none;}ul.categories li a {&nbsp; display: block;&nbsp; max-width: 100%;&nbsp; padding: 10px 5px 10px 10px;&nbsp; font-size: 13px;&nbsp; background: #FCFCFC;&nbsp; color: #3f729b;&nbsp; border: 1px solid #c3cfd9;&nbsp; border-top: 0px !important;&nbsp; text-decoration: none;&nbsp; font-weight: 700;&nbsp; cursor: pointer;&nbsp; transition: all 150ms ease-out;&nbsp; -webkit-transition: all 150ms ease-out;}ul.categories li a:hover {&nbsp; text-indent: 5px;}ul.sub {&nbsp; display: none;}.activeUi {&nbsp; display: block;}ul ul {&nbsp; display: none;}.show {&nbsp; display: block;}<div class="categories-list">&nbsp; &nbsp; <ul class="categories">&nbsp; &nbsp; &nbsp; &nbsp; <li >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 4</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 5</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 6</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 7</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 8</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 9</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="javascript:;" class="toggle">Test 3</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul></div>