摺疊多級菜單的實現方法

對於在網頁上展現的課本目錄這樣的多級菜單，想要實現「完整顯示某一章的目錄，其它章只顯示章名」的效果，最開始用的是 "hide all child elements but first" 做爲關鍵字搜索，可是找到的語句 $(".unfocused").not(":first-child").hide(); 並無效果。次日早上再看這段代碼的時候，決定逐語句測試，發現最開始的 $(".unfocused") 語句獲得的是一個 Object 數組，這樣直接隱藏第一個子節點以後的子節點的話，會把其他各章的章標題都隱藏掉。（注：各章 div 標籤的類名爲 unfocused，需完整顯示的那一章的類名爲 focused。）

後來想到能夠用 each() 方法來隱藏每一章的非首個子節點，可是該方法後面須要跟匿名函數，這時在 StackOverflow 上看到了一個經過 CSS 後代選擇器來選擇子節點的方法，突然想到本身能夠用父節點的類名加上子元素選擇器來隱藏各章的非首個子節點，$(".unfocused > div:not(:first-child)").hide()，一行語句就搞定了，so good！

不過最後在網頁源碼中測試的時候，發現語句又沒有生效，檢查了一下代碼，原來是語句沒有寫完整，下面的語句中，最後一行的圓括號和分號都給漏掉了，真是粗心……

<script type="text/javascript">
  $(document).ready(function() {
    $(".unfocused > div:not(:first-child)").hide();
  });
</script>