折叠树不能正常工作

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>