我的网站上有一个展开/折叠按钮来操作列表项。但是,当我启动全部折叠时,所有内容都消失了,甚至是第一项。从那里我唯一的选择是展开所有以便我可以看到任何东西。
JS:
function prepareList() {
$('#expList').find('li:has(ul)').click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed').children('ul').hide();
//Create the toggle
var toggle = false;
$('#listToggle').unbind('click').click(function(){
if(toggle == false){
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
$('#listToggle').text("Collapse All");
toggle = true;
}else{
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
$('#listToggle').text("Expand All");
toggle = false;
}
});
$('#expList').find('li').click( function(event) {
siteUrl = $(this).attr('value');
if(this.id != 'myList'){
RefreshSiteLists(siteUrl);
} else{
RefreshSiteLists(siteUrl);
}
return false;
});
}
HTML:http://jsfiddle.net/9HxGp/
基本上当我崩溃时,一切都会消失。只有当我添加 <span>
时才会发生这种情况围绕我的文字。
最佳答案
因为我无法理解这个问题(抱歉,来晚了)我采取了一些自由并使其成为一个可折叠的 TreeView ,其中可以折叠第 2 级的元素,并且 #listToggle
全部展开(如果有任何折叠),可在此处访问:http://jsfiddle.net/daMZp/1/ .我还稍微替换了折叠的类,以实现我在屏幕截图中看到的效果。
然后我又看了一遍,是的,现在我明白发生了什么。我已在此处为您修复:http://jsfiddle.net/9HxGp/6/ (至少,如果您可以称其为固定的 - 嘿,顶层仍然可见,但这种树的行为仍然不正确)。
现在,为了了解发生了什么,让我们看一下没有任何跨度的列表:http://jsfiddle.net/AD4rX/1/ .添加控制台日志给了我们有趣的结果(http://jsfiddle.net/9HxGp/9/ 和 http://jsfiddle.net/AD4rX/2/)- 基本上,执行 $('.collapsed').children()
目标 ul
和给定 li
的 span
- 因此,标签将在尝试折叠时消失。当然这会有所不同,当 li
中只有文本节点(和 ul
)时,因为 jquery 将只针对 ul
,留下文本标签可见。有了这些知识,我们可以回到解决方案:http://jsfiddle.net/9HxGp/10/ ,其中我们针对给定 li
的所有 :not(span)
子级。
抱歉,来来回回,但至少这是“为什么?”的答案。
关于javascript - 展开折叠切换隐藏所有 li 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19549858/