Javascript 展开折叠切换隐藏所有li项

我在我的网站上有一个展开/折叠按钮来操作列表项。然而，当我启动“全部折叠”时，所有东西都消失了，甚至第一个项目也消失了。从那里，我唯一的选择就是展开所有，这样我就可以看到任何东西

JS:

HTML:

基本上，当我崩溃时，一切都消失了。只有在文本周围添加

时才会发生这种情况

---

这似乎与您的孩子选择器有关。我修复了JSFIDLE，使其能够运行-请参阅上面的评论。所需的只是对按钮的点击处理程序的选择器进行调整，结果如下：

$('#listToggle').unbind('click').click(function(){
    if(toggle == false){
      $('.collapsed').addClass('expanded');
      $('.collapsed').children().show('medium').children().show(); //needed to add a second level to make everything show here for some reason
      $('#listToggle').text("Collapse All");
      toggle = true;
    }else{
      $('.collapsed').removeClass('expanded');
      $('.collapsed').find('li').hide('medium'); //specifically hides li children
      $('#listToggle').text("Expand All");
      toggle = false;          
    }
  });

注意：我不确定较低级别的菜单项是否打算折叠

---

由于我无法理解这个问题（抱歉，时间太晚了），我自由地将其制作成一个可折叠的树状视图，其中第二层的元素可以折叠，而

#listToggle

可以展开所有（如果有任何折叠的），可在此处访问：。我还稍微替换了崩溃的类，以实现我在屏幕截图中看到的功能

然后我又看了一遍，是的，现在我知道发生了什么。我在这里为您修复了它：（至少，如果您可以称之为修复-嘿，顶层保持可见，但这样的树的行为仍然不正确）

现在，为了理解正在发生的事情，让我们看一看没有任何跨度的列表：添加控制台日志会给我们带来有趣的结果（并且）-基本上，执行

$（'.collapsed'）.children（）

目标是给定

li

的

ul和
span
-因此，在尝试折叠时标签将消失。当然，当
li
中只有文本节点（和
ul
）时，这将表现出不同的行为，因为jquery将只针对
ul
，使文本标签可见。有了这些知识，我们可以回到解决方案：，其中我们针对给定
li的所有
：not（span）
子级

很抱歉，这件事来来回回，但至少这是“为什么”的答案
 不幸的是，小提琴坏了。你能具体说明这应该做什么吗？这是否应该创建可扩展的树列表？在图片中（希望不是太小），当您全部折叠时，所有子级别的项目都应折叠，并且“Sharepoint演示网站”应保持打开状态，并且图像更改为加号（css）。这可以正常工作，直到我将列表项文本换行。然后发生的事情是，当我选择“塌陷”时，所有内容都消失了，即使是顶级站点。所以在这一点上我没有什么可以扩展的。我不知道为什么添加span标记会导致这种情况，但我认为这与jquery selectorok有关，通过添加jquery并执行
prepareList（）将JSFIDLE修复为工作中断状态
-嗯，我想子项目也会折叠是有道理的。我试过你的小提琴，但你会注意到，在你折叠所有项目后，你不能再单击加号图标进行扩展。啊！有一些断开的链接-我想你是在内联网上？这对我来说有点难测试，因为我看不到这些按钮：）是的，这是一个内部网，但我在我的网站上尝试了更改，它的行为方式是一样的。工作非常完美。谢谢你的解释。
$('#listToggle').unbind('click').click(function(){
    if(toggle == false){
      $('.collapsed').addClass('expanded');
      $('.collapsed').children().show('medium').children().show(); //needed to add a second level to make everything show here for some reason
      $('#listToggle').text("Collapse All");
      toggle = true;
    }else{
      $('.collapsed').removeClass('expanded');
      $('.collapsed').find('li').hide('medium'); //specifically hides li children
      $('#listToggle').text("Expand All");
      toggle = false;          
    }
  });