展開 - 摺疊切換隱藏所有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

因爲我是無法理解的問題（不好意思，這是已故）我花了一些自由，說得那麼，它是一個可摺疊的樹形視圖，其中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和span的給定li - 因此，試圖崩潰時標籤將消失。當然，這會表現不同，當有內li只有文本節點（和ul），如jQuery將隨後只針對ul，留下的文字標籤可見。有了這些知識，我們可以回到解決方案：http://jsfiddle.net/9HxGp/10/，我們的目標是給定li的所有:not(span)孩子。

對不起，來回，但至少它是回答「爲什麼？」。

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/