使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(); 
     } 
    }); 
});