多級動態列表jQuery

Question

在點擊列表元素應展開（顯示）孩子，並在第二次點擊它應該再次所有的colapse。 我做了這個：https://jsfiddle.net/Zydnar/o6wkobfv/3/

<ol id="list"> 
    List title 
    <li onclick="fajnalista(this)"> 
     Item 1 
     <ol> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
     </ol> 
    </li> 
    <li onclick="fajnalista(this)"> 
     Item 2 
     <ol> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
      <li class="list_child"></li> 
     </ol> 
    </li> 
</ol> 

#list { 
    list-style-type: circle; 
} 
.list_child { 
    visibility: collapse; 
    height: 0px; 
} 

function fajnalista(dis){ 
    $(dis).find(".list_child").toggle().css({ "list-style-type": "square" }); 
    $(dis).find(".list_child").toggle().css({ "visibility": "visible" }); 
    $(dis).find(".list_child").toggle().css({ "height": "initial" }); 
} 

，但有一個問題 - 當我刪除第二行，或當我移動它不能正常工作。實際上，「列表式風格」應該被切換爲擴展「李」而不是它的孩子。

Answer 1

這是應該如何工作的:)唯一的問題是我對jQuery中toggle（）的理解。 https://jsfiddle.net/Zydnar/o6wkobfv/4/

function fajnalista(dis) { 
     var enabled = true; 
     if ($(dis).find(".list_child").css("visibility") === "collapse") { 
      enabled = false; 
     } 
     if (!enabled) { 
      $(dis).find(".list_child").css({ 
       "visibility": "visible", 
       "height": "initial", 
       "list-style-type": "square" 
      }); 
     } 
     else { 
      $(dis).find(".list_child").css({ 
       "visibility": "collapse", 
       "height": "0", 
       "list-style-type": "square" 
      }); 
     }}