展开所有/折叠不起作用的类的所有列表

Question

我有一个树列表，用户可以通过单击打开或关闭分支。树有许多级别和子级别。当用户单击"全部折叠"或"全部展开"按钮时，我希望能够折叠所有分支(向下到第一级)或展开类"我的可单击"的所有分支。

我可以让各个分支机构关闭或打开。但我不能让它们同时打开或关闭。

这是我的小提琴：https://jsfiddle.net/dyrh325f/65/

需要注意的一点是，ExpandAll按钮是在填充整个树的ajax调用之后使用的。我在ajax调用的"完成"部分有"全部展开"代码，因此它适用于生成的html。

我希望用户能够在关闭一个或多个节点后展开整个树。我已经尝试了jsFiddle中的几种变体。似乎什么都不管用。我做错了什么？

我是一个jQuery新手，所以-感谢所有的帮助！！！

代码：HTML:展开树

<font face="calibri" size="3pt" >
<ul id="tree1" class="mytree">  
<li id="theJob" class="my-clickable mytree liParOpen">My Job</li>
<ul id="treeList" class="mytree" name="treeList">
<li id='0' class='mytree child-click'>Batcher</li>
<li id='1' class='mytree child-click'>Retriever</li>
<li id='2' class='my-clickable mytree liParOpen'> TASK 2</li>
<ul class='mytree'>
<li id='2a' class='mytree child-click'>Prep1</li>
<li id='2b' class='mytree child-click'>Prep2</li>
<li id='2c' class='mytree my-clickable liParOpen'>PREP3</li>
<ul class='mytree'>
<li id='2b1' class='mytree child-click'>PREP3a</li>
<li id='2b2' class='mytree child-click'>PREP3b</li>
</ul>
</ul>
<li id='3' class='mytree child-click' > task 3</li>
<li id='4' class='my-clickable mytree liParOpen'> TASK 4</li>
<ul class='mytree'>
<li id='4a' class='mytree child-click'>Edit1</li>
<li id='4b' class='mytree child-click'>Edit2</li>
</ul>
<li id='5' class='my-clickable mytree liParOpen'> TASK 5</li>
<ul class='mytree'>
<li id='5a' class='mytree my-clickable liParOpen'>Del1</li>
<ul class='mytree'>
<li id='5a1' class='mytree child-click'>Del1a</li>
<li id='5a2' class='mytree child-click'>Del1b</li>
</ul>
<li id='5b' class='mytree child-click'>Del2</li>
</ul>
<li id='6' class='mytree child-click'>DocEjector-3</li>
</ul>
</ul>
</font>

Jquery：

$(document).ready(function(){
// expand button
$('#expandTree').on('click', function(event) {
var all = $('.my-clickable');
var closed = all.filter('.liParClosed');
closed.find("ul").each(function(){
$(this).next('ul').attr("class", "liParOpen");
$(this).nextAll('ul').toggle();
});
}); // end expand button 
// collapse button
$('#collapseTree').on('click', function(event) {
var all = $('.my-clickable');
var open = all.filter('.liParOpen');
open.find("ul").each(function(){
$(this).next("ul").attr("class", "liParClosed");
$(this).nextAll('ul').slideToggle();
});
}); // end collapse button 
// this is the top most level parents
$(".my-clickable").on('click', function(event) {
var taskId=$(this).closest("li").attr('id');
var tsk = '#'.concat(taskId);  
if (taskId != "theJob") {
if ($(tsk).next('ul').length <= 0) {
$(tsk).toggleClass("liParOpen liParClosed");
$(tsk).next('ul').slideToggle();
}
else { 
//$(event.target).find('ul').toggle();
$(tsk).toggleClass("liParOpen liParClosed");
$(tsk).children('li').slideToggle();
$(tsk).next('ul').slideToggle();
}
}  // end if taskId != "theJob"
else {
$(tsk).toggleClass("liParOpen liParClosed");
$(tsk).slideToggle();
}
event.cancelBubble=true;
event.stopPropagation();
});
//2nd level parents
$(".my-clickable").on('click', ".my-clickable", function(event) {
var taskId=$(this).closest("li").attr('id');
var tsk = '#'.concat(taskId);
//$(event.target).find('ul').slideToggle();
$(tsk).toggleClass("liParOpen liParClosed");
//event.cancelBubble=true;
event.stopPropagation();
});

// first level child w/no children (parent=job)
$(".child-click").on('click', function(event) {
event.stopPropagation();
});

})；

CSS：

ul.mytree  li.liParClosed { 
background-color: green;
fontWeight: normal;
}
ul.mytree  li.liParOpen { 
background-color: cyan;
fontWeight: normal;
}
.selected{
border: 3px solid yellow; 
background-color: yellow;
fontWeight: bold;
}
ul.mytree  liParOpen selected{ 
border: 3px solid red; 
background-color: yellow;
fontWeight: bold;
}
ul.mytree  li selected{ 
border: 3px solid red; 
background-color: yellow;
fontWeight: bold;
}
ul.mytree  li { 
background-color: white;
fontWeight: normal;
}
ul.mytree  { 
background-color: white;
fontWeight: normal;
}

Answer 1

您几乎得到了它，但类"liParClosed"one_answers"liParOpen"的切换操作不正确。

这里有一个小提琴修复这个问题：

JS Fiddle

相关代码更改：

// expand button
$('#expandTree').on('click', function(event) {
var all = $('.my-clickable');
var closed = all.filter('.liParClosed');
closed.each(function(){
$(this).removeClass('liParClosed').addClass('liParOpen');
$(this).next('ul').slideToggle();
});
}); // end expand button 
// collapse button
$('#collapseTree').on('click', function(event) {
var all = $('.my-clickable');
var open = all.filter('.liParOpen');
open.each(function(){
$(this).removeClass('liParOpen').addClass('liParClosed');
$(this).next('ul').slideToggle();
});
}); // end collapse button 

查看添加/删除类的方式。此外，你查找open。find("ul")但是open本身必须循环通过，因为它是open李的列表。

希望这能有所帮助。：)