javascript - 展开折叠切换隐藏所有 li 元素

Question

我的网站上有一个展开/折叠按钮来操作列表项。但是，当我启动全部折叠时，所有内容都消失了，甚至是第一项。从那里我唯一的选择是展开所有以便我可以看到任何东西。

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> 时才会发生这种情况围绕我的文字。

Answer 1

因为我无法理解这个问题(抱歉，来晚了)我采取了一些自由并使其成为一个可折叠的 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) 子级。

抱歉，来来回回，但至少这是“为什么？”的答案。