展开/折叠切换隐藏所有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>时才会发生这种情况。

- Batman

---

很遗憾，这个小提琴不起作用。您能否具体说明它应该做什么？它应该创建可展开的树形列表吗？ - eithed

在图片中（希望不要太小），当您折叠所有内容时，所有子级项目都应该折叠，“Sharepoint Demo Website”应该保持打开状态，并且图像会更改为加号符号（CSS）。这很好用，直到我在我的列表项文本中包装<span>。然后发生的情况是，当我选择折叠时，所有内容都会消失，甚至顶级站点也会消失。因此，在那一点上，没有东西可以扩展。我不知道为什么添加span标记会导致这种情况，但我认为这与jquery选择器有关。 - Batman

好的，我通过添加jQuery并执行prepareList()来修复了jsfiddle，现在它可以正常工作了 - http://jsfiddle.net/9HxGp/5/ - StackExchange What The Heck

Answer 1

由于我无法理解问题（抱歉，现在已经很晚了），所以我进行了一些修改，使其成为可折叠的树状视图，其中第二级元素可以折叠，而#listToggle会展开所有元素（如果有任何折叠的元素），这里可以访问：http://jsfiddle.net/daMZp/1/。我还稍微更改了collapsed类，以实现屏幕截图中的效果。

然后我再次看了一下，是的，现在我明白出了什么问题。我已经为您修复了它：http://jsfiddle.net/9HxGp/6/（至少，如果你可以称之为修复-嘿，顶部级别保持可见，但这样的树的行为仍然不正确）。

现在，为了理解发生了什么，请看没有任何span的列表：http://jsfiddle.net/AD4rX/1/。添加控制台日志可以得到有趣的结果（http://jsfiddle.net/9HxGp/9/和http://jsfiddle.net/AD4rX/2/）-基本上，执行$('.collapsed').children()会定位给定

的

和，因此在尝试折叠时标签将消失。当然，当
• 中只有文本节点（和
  ）时，这将表现得不同，因为jquery只会定位
  ，使文本标签可见。有了这个知识，我们可以回到解决方案：http://jsfiddle.net/9HxGp/10/，在其中我们定位给定
  • 的所有:not(span)子元素。

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

- eithed

Answer 2

看起来与您的子选择器有关。我修复了jsfiddle，使其运行-请参见上面的评论。所需的只是对按钮的单击处理程序进行微调，最终结果如下：

$('#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;          
    }
  });

注意：我不确定较低级别的菜单项是否应该折叠？

http://jsfiddle.net/9HxGp/4/

- StackExchange What The Heck

---

嗯，我想孩子项目也折叠起来可能是有道理的。 - Batman

我尝试了你的fiddle，但是你会注意到在你折叠全部之后，你不能再点击加号图标来展开了。 - Batman

啊！有一些损坏的链接 - 我猜你在内网上？这对我来说有点困难，因为我看不到那些按钮 :) - StackExchange What The Heck

是的，它是一个内部网络，但我在我的网站上尝试了更改，并且表现方式相同。 - Batman