折りたたみツリーが機能しない

Question

折り畳みツリーを作成しようとしていて、ここで答えを見つけることができました。

しかし、私がフォルダをクリックすると、それは崩壊しないので、なぜ2番目の項目が表示されないのかわかりません。

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

Iトグル以下、それは私のためにうまくいかない：

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のファイルは

以下UPDATE 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のポイントは、このすべてを単純化し、代わりにif-elseの代わりに.toggleClass()のようなものを使用することです。

また、クラスhidden1の要素を非表示にするようにCSS属性を設定していないようです。

次の編集を参照してください。これは必要に応じて機能するはずです。

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