使ul的行爲像選擇列表

Question

我有一個有序的列表，它有一個樹結構。我想要實現的是用戶看到一個選擇列表。只有第一級項目纔會顯示給用戶。

然後，如果用戶點擊一個項目，並且該項目有子項，則顯示該項目的絕對子項，依此類推。

$("#dropDownMenu #tree li").each(function() { 
    $(this).addClass('hide'); 
}); 

$("#dropDownMenu #tree > li").each(function() { 
    $(this).removeClass('hide'); 
}); 

     <div id="dropDownMenu"> 
     <div> 
      <button id="clickMe">Click here</button> 
     </div> 
     <ul id="tree" class="tree no-bullet" style="display:none"> 
      <li> 
       Animals 
       <ul> 
        <li>Birds</li> 
        <li> 
         Mammals 
         <ul> 
          <li>Elephant</li> 
          <li>Mouse</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li> 
       Animals1 

      </li> 
     </ul> 
    </div> 

有沒有什麼好的方法可以做到這一點，因爲我會有不同數量的關卡？

Answer 1

對於上述結構中，我們可以使用下面的代碼：

$(document).ready(function(e) { 
    $("#clickMe").on("click", function(){ 
     $("#tree").show(); 
    }); 
    $("li").on("click", function(){ 
     if($(this).children("ul")){ 
      $(this).children("ul").show(); 
     } 
    }); 
});