3

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

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>在文本周围添加 a 时才会发生这种情况。

在此处输入图像描述

4

2 回答 2

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()targetsul和span's li- 因此，尝试折叠时标签会消失。当然，当 中只有文本节点（和ul）时，这会表现不同，li因为 jquery 将只定位ul，使文本标签可见。有了这些知识，我们可以回退到解决方案：http: //jsfiddle.net/9HxGp/10/，我们针对:not(span)给定的所有孩子li。

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

于 2013-10-23T21:57:26.960 回答
1

这似乎与您的子选择器有关。我修复了 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/

于 2013-10-23T20:07:43.803 回答