折叠树无法正常工作

Question

我正在尝试创建一个折叠树，并且能够在这里找到答案。

但是，当我点击该文件夹时，它不会崩溃，我不知道为什么第二个项目没有出现。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新

以下是切换，但对我来说无效：

＆＃13;

＆＃13;

var toggle = function () {

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

    };

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

＆＃13;

<ul style="list-style:none; margin-left:-14px">
	                   <li class="Collapsable">
                       		<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">
                            	<li class="Collaposable" >
                                	<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>

＆＃13;

＆＃13;

＆＃13;

并显示以下图片：

但是，它似乎已经隐藏了文件夹。不是当用户点击按钮然后出现第二个文件时

更新2

以下是我和它仍然没有显示隐藏的链接

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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">
	                   <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 class="Collapsable" >
                                	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你这复杂化了。您不需要任何if语句。 jQuery的要点是简化所有这一切，而只是使用类似.toggleClass()而不是if-else的内容。

此外，您似乎没有CSS属性告诉任何隐藏类hidden1的元素。

请参阅下面的编辑内容，它应该可以正常工作。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;