HTML 折叠/展开树未按预期工作答案

【问题标题】：HTML collapse/expand tree not working as expectedHTML 折叠/展开树未按预期工作
【发布时间】：2020-01-14 04:21:35
【问题描述】：

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

我试过这个代码：https://stackoverflow.com/a/30945775/7727479

实际结果：

首先显示测试 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
  <ul class="categories">
    <li class="child active-collapse" data-parentcategory="0" data-id="1">
      <a class="li-child-text" style="padding-left:1%">Test 1</a>
      <ul class="sub" data-parentcategory="0" data-id="1">
        <li class="child deactive-collapse" data-parentcategory="1" data-id="2">
          <a class="li-child-text" style="padding-left:5%">Test 2</a>
          <ul class="sub" data-parentcategory="1" data-id="2">
            <li class="child deactive-collapse" data-parentcategory="2" data-id="4"><a class="li-child-text" style="padding-left:10%">Test 4</a></li>
            <li class="single deactive-collapse" data-parentcategory="4" data-id="5"><a class="li-single-text" style="padding-left:20%">Test 5</a></li>
            <li class="single deactive-collapse" data-parentcategory="4" data-id="6"><a class="li-single-text" style="padding-left:20%">Test 6</a></li>
          </ul>
        </li>
        <li class="single deactive-collapse" data-parentcategory="2" data-id="7"><a class="li-single-text" style="padding-left:10%">Test 7</a></li>
      </ul>
      <ul class="sub" data-parentcategory="0" data-id="1">
        <li class="child deactive-collapse" data-parentcategory="1" data-id="8"><a class="li-child-text" style="padding-left:5%">Test 8</a></li>
        <li class="single deactive-collapse" data-parentcategory="8" data-id="9"><a class="li-single-text" style="padding-left:40%">Test 9</a></li>
      </ul>
    </li>
    <li class="single active-collapse" data-parentcategory="0" data-id="3"><a class="li-single-text" style="padding-left:1%">Test 3</a></li>
  </ul>
</div>

【问题讨论】：

标签： javascript jquery collapse

【解决方案1】：

我认为主要问题在于你的 html 结构，如果你想创建一个关卡，你需要在该关卡中创建li，并在li 元素中使用anchor。

例如，要在 TEST 1.0 中添加 TEST 2.2，您需要在 TEST 1.0 的 anchor 之后找到下一个 ul.sub > 并添加另一个 li 和 anchor ，如果你想在 TEST2.2 中创建另一个子菜单，你需要创建 ul 类 sub 和另一个 li

<li class="single deactive-collapse">
    <a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
    <ul class="sub" >
        <li class="child deactive-collapse">
            <a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
        </li>
    </ul>
</li>

这里是sn-p

var addById = function (parent, id, name) {
    $('div.categories-list li').each(function (i, e) {
        if (parent === $(e).data("id")) {
            if (!$(e).find("ul.sub").length) {
                $(e).append('<ul class="sub"></ul>');
            }
            element = '<li class="child deactive-collapse" data-parentcategory="' + parent + '" data-id="' + id + '"><a class="li-child-text" style="padding-left:5%">' + name + '</a></li>';
            $(e).find("ul.sub").append($(element));
            return true;
        }
    });
};
addById(1, 123, 'dynamically');
addById(15, 124, 'dynamically');

$(document).ready(function () {              
    $('div.categories-list li > a').click(function () {
        var main_category = $(this).data('parentcategory');
        $('ul.sub', $(this).parent()).eq(0).toggle();
        return false;
    });
});

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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
    <ul class="categories">
        <li class="child active-collapse" data-parentcategory="0" data-id="1">
            <a class="li-child-text" style="padding-left:1%">Test 1.0</a>
            <ul class="sub">
                <li class="child deactive-collapse" data-parentcategory="1" data-id="2">
                    <a class="li-child-text" style="padding-left:5%">Test 2.0</a>
                    <ul class="sub">
                        <li class="child deactive-collapse" data-parentcategory="2" data-id="4">
                            <a class="li-child-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                        <li class="single deactive-collapse" data-parentcategory="2" data-id="5">
                            <a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                        <li class="single deactive-collapse" data-parentcategory="2" data-id="6">
                            <a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
                        </li>
                    </ul>
                </li>

                <li class="single deactive-collapse" data-parentcategory="1" data-id="7">
                    <a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a>
                </li>
                <li class="child deactive-collapse" data-parentcategory="1" data-id="8">
                    <a class="li-child-text" style="padding-left:5%">Test 8</a>
                    <ul class="sub" data-parentcategory="8" data-id="9">
                        <li class="single deactive-collapse" data-parentcategory="8" data-id="9">
                            <a class="li-single-text" style="padding-left:40%">Test 9</a>
                        </li>
                    </ul>
                </li>
                <li class="single deactive-collapse" data-parentcategory="1" data-id="10">
                    <a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
                    <ul class="sub">
                        <li class="child deactive-collapse" data-parentcategory="10" data-id="11">
                            <a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
                        </li>
                    </ul>
                </li>
                <!-- PUT EXAMPLE CODE HERE -->
            </ul>
        </li>
        <li class="child active-collapse" data-parentcategory="0" data-id="12">
            <a class="li-child-text" style="padding-left:1%">Test 1.1</a>
            <ul class="sub">
                <li class="child deactive-collapse" data-parentcategory="12" data-id="13"><a class="li-child-text" style="padding-left:5%">Test 2.1 LAST</a></li>
                <li class="single deactive-collapse" data-parentcategory="12" data-id="14"><a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a></li>
            </ul>
        </li>
        <li class="single active-collapse" data-parentcategory="0" data-id="15"><a class="li-single-text" style="padding-left:1%">Test 1.2 LAST</a></li>
    </ul>
</div>

【讨论】：

感谢您的回复。您是否在我的代码中检查过，测试 8 和测试 9 可用。但是，它不是显示？你能解决这个问题吗？
我已经将它们添加到 sn-p 中，现在我看到你在那里做了什么，我将使用 data-parentcategory 和 data-id 修复 sn-p，这样你就可以做对了跨度>
运行完美。你能帮我在 li 中动态添加节点级别吗？我会接受并支持您的回答。
你能帮帮我吗？
我在 sn-p addById 中添加了一个函数，它会在所有 li 中搜索 data-id，所以如果你想在 Test 9 中添加新的子元素，例如尝试 addById(9 ,'您的 ID 在这里','一些文本');您可以随意编辑它

【解决方案2】：

是的，你对 ul li 的结构有一些问题。请看一下我的演示。您可以将您的类别和属性添加到您的遗嘱中。它不会妨碍。

document.querySelector('.categories').addEventListener('click', (e) => {
  const el = e.target;
  const sibling = el.nextSibling.nextSibling;

  if (el && el.className == 'toggle' && sibling) {
    sibling.classList.toggle('show');
  }
});

div.categories-list {
  width: 50%;
  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;
}
ul ul {
  display: none;
}

.show {
  display: block;
}

<div class="categories-list">
    <ul class="categories">
        <li >
            <a href="javascript:;" class="toggle">Test 1</a>
            <ul>
                <li>
                    <a href="javascript:;" class="toggle">Test 2</a>
                    <ul>
                        <li>
                            <a href="javascript:;" class="toggle">Test 4</a>
                            <ul>
                                <li>
                                    <a href="javascript:;" class="toggle">Test 5</a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="toggle">Test 6</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:;" class="toggle">Test 7</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;" class="toggle">Test 8</a>
                    <ul>
                        <li>
                            <a href="javascript:;" class="toggle">Test 9</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;" class="toggle">Test 3</a>
        </li>
    </ul>
</div>

【讨论】：

感谢拉胡尔的努力。为此+1 :) 但是，我自己解决了。但是，我有一个小问题。我添加了有问题的屏幕截图。我想像这样在 li 标签中添加节点级别。
如果你不明白我想要什么。然后，您可以在上面的答案的聊天室中查看。