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>时才会发生这种情况。

enter image description here

Answer 1

由于我无法理解这个问题（对不起，已经很晚了）我采取了一些自由并使其成为可折叠的树视图，其中第二级元素可以折叠，#listToggle扩展all（如果有任何折叠），可在此处访问：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和span的给定li 1}} - 因此，标签在尝试折叠时会消失。当然，当ul中只有文本节点（和li）时，这将表现不同，因为jquery将仅定位ul，使文本标签可见。有了这些知识，我们可以回到解决方案：http://jsfiddle.net/9HxGp/10/，我们定位给定:not(span)的所有li个孩子。

对不起，为此来回走动，但至少它是“为什么？”的答案。

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/

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

2 个答案: