Collapsing Tree funktioniert nicht

Question

Ich versuche einen kollabierenden Baum zu erstellen und konnte die Antwort hier finden.

Wenn ich jedoch auf den Ordner klicke, kollabiert er nicht und ich bin mir nicht sicher, warum der zweite Eintrag nicht erscheint.

$('.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

Die folgende i den Knebel und es funktioniert für mich nicht aus:

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>

und zeigt folgendes Bild:

Es ist jedoch bereits den versteckten Ordner angezeigt wird. Nicht, wenn der Benutzer klickt auf die Schaltfläche und dann die zweiten Dateien erscheint

UPDATE 2

unter dem, was ich ist und es immer noch nicht die versteckten Link besagen

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

Sie sind vorbei, dies zu komplizieren. Sie benötigen keine dieser if Anweisungen. Der Punkt von jQuery ist, all dies zu vereinfachen und stattdessen nur etwas wie .toggleClass() anstelle eines if-else zu verwenden.

Außerdem scheint es, als ob Sie kein CSS-Attribut haben, das einem Element mit der Klasse hidden1 sagt, dass es versteckt werden soll.

Siehe die Änderungen unten und es sollte wie gewünscht funktionieren.

$('.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>