HTML折疊/展開樹無法按預期工作

Question

我想要折疊多層次的類別樹。 我從堆棧中嘗試了很多答案，但它沒有用。 誰能幫幫我嗎？

我試過這段代碼： 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> 

Answer 1

我認為主要的問題在於你的html結構，如果你想創建一個級別，你需要在li級元素中使用anchor創建那個級別的li 。

例如，要在TEST 1.0中添加TEST 2.2 ，您需要在用於TEST 1.0的anchor之后找到下一個ul.sub並添加另一個帶有anchor li ，如果要在TEST2.2中創建另一個子菜單， 則需要創建ul class 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>

這是片段

 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> 

Answer 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>