摺疊樹不能正常工作

Question

我想創建一個摺疊樹，並能夠在這裏找到答案。

但是，當我點擊文件夾，它不會崩潰，我不知道爲什麼第二個項目不會出現。

$('.folder').on('click', function(e) { 
 
\t \t var folder = $(this).find('.sub-folder'); 
 
\t \t \t if (e.target !== this) return; 
 
\t \t \t 
 
\t \t \t if(folder.hasClass('hidden1')) { 
 
\t \t \t \t folder.removeClass('hidden1'); 
 
\t \t \t } else { 
 
\t \t \t \t folder.addClass('hidden1'); 
 
\t \t \t } 
 
\t });

.folder { 
 
    \t \t cursor: pointer; 
 
\t } 
 
\t .sub-folder{ 
 
\t \t cursor:pointer; \t 
 
\t }

<ul class="container" style="list-style:none; margin-left:-14px"> 
 
\t     <li class="folder"> 
 
         \t \t <h4><a href="#" ><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h4> 
 
          <ul class="sub-folder hidden1" style="list-style:none"> 
 
          \t <li> 
 
           \t <h5><a href="DMgmt.cfm"><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h5> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul>

UPDATE

下面我切換，並沒有爲我工作了：

var toggle = function() { 
 

 
     $(this).parent().children().toggle(); 
 
     $(this).toggle(); 
 

 
    }; 
 

 
$(".Collapsable").click(toggle); 
 
$(".Collapsable").each(toggle); 
 
\t });

<ul style="list-style:none; margin-left:-14px"> 
 
\t     <li class="Collapsable"> 
 
         \t \t <h4><a href="#" ><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h4> 
 
          <ul style="list-style:none"> 
 
          \t <li class="Collaposable" > 
 
           \t <h5><a href="DMgmt.cfm"><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h5> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul>

，並顯示如下圖：

但是，它出現在隱藏文件夾了。不是當用戶點擊該按鈕，然後第二個文件顯示

更新2

下面是我和它仍然不顯示隱藏的鏈接

// JavaScript Document$('.folder').on('click', function(e) { 
 
$(document).on('click', '.folder', function(){ 
 
    var folder = $(this).find('.sub-folder'); 
 
    folder.toggleClass('hidden1'); 
 
});

.folder { 
 
    cursor: pointer; 
 
} 
 
.sub-folder { 
 
    cursor: pointer; 
 
} 
 
.hidden1 { 
 
    display: none; 
 
}

<link rel="stylesheet" href="images/styleregal.css" type="text/css" /> 
 
<script src="js/Collaposable_tree.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<ul class="container" style="list-style:none; margin-left:-14px"> 
 
\t     <li class="folder"> 
 
         \t \t <h4><a href="#" ><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h4> 
 
          <ul class="sub-folder hidden1" style="list-style:none"> 
 
          \t <li class="Collapsable" > 
 
           \t <h5><a href="CalMediConnect_DMgmt.cfm"><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h5> 
 
           </li> 
 
          </ul> 
 
         </li> 
 
        </ul>

Answer 1

你已經過分複雜了。您不需要任何這些if語句。 jQuery的要點是要簡化所有這些，而只是使用.toggleClass()而不是if-else。

另外，它似乎沒有一個CSS屬性告訴隱藏類hidden1的任何元素。

請參閱下面的編輯，它應該按需要工作。

$('.folder').on('click', function(e) { 
 
    var folder = $(this).find('.sub-folder'); 
 
    folder.toggleClass('hidden1'); 
 
});

.folder { 
 
    cursor: pointer; 
 
} 
 
.sub-folder { 
 
    cursor: pointer; 
 
} 
 
.hidden1 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="container" style="list-style:none; margin-left:-14px"> 
 
    <li class="folder"> 
 
    <h4><a href="#" ><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h4> 
 
    <ul class="sub-folder hidden1" style="list-style:none"> 
 
     <li> 
 
     <h5><a href="DMgmt.cfm"><img src="images/folder-documents-icon32.jpg" alt="Custodial" class="float-left"/ >&nbsp;Disease Management</a></h5> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>