层次结构和多选项下拉列表（HTML）并在项目之间导航（子节点）

Question

嗨:)我需要制作HTML层次结构下拉列表它由层（选项）和每个选项组成，如果有子节点，我们将看到箭头旁边的箭头如果我们点击这个箭头，所有这些选项将消失，并且所有的子节点都会出现.....每个人在左边都有一个箭头，如果我们点击左边的箭头，右边的箭头都是这个选项消失和父级会出现，如果我们点击右箭头，下一级会出现，等我搜索时，我发现树下拉列表，但我的经理不希望它:(..... pleas如果一些一个有任何想法或链接关于这个下拉我跳到，直到我....谢谢你:)

Answer 1

http://jsfiddle.net/1jwyauLy/

<ul class="level1"> 
    <li> <span> &rarr; Option 1</span> 

     <ul class="level2"> 
      <li> <span class="lar">&larr;</span> Option 1.1</li> 
      <li> <span class="lar">&larr;</span> Option 1.2</li> 
      <li> <span class="lar">&larr;</span> Option 1.3</li> 
     </ul> 
    </li> 
    <li> <span> &rarr; Option 2</span> 

     <ul class="level2"> 
      <li> <span class="lar">&larr;</span> Option 2.1</li> 
      <li> <span class="lar">&larr;</span> Option 2.2</li> 
      <li> <span class="lar">&larr;</span> Option 2.3</li> 
     </ul> 
    </li> 
    <li><span> &rarr; Option 3</span> 

     <ul class="level2"> 
      <li> <span class="lar">&larr;</span> Option 3.1</li> 
      <li> <span class="lar">&larr;</span> Option 3.2</li> 
      <li> <span class="lar">&larr;</span> Option 3.3</li> 
     </ul> 
    </li> 
</ul> 

$(".level2").hide(); 

$(".level1>li").on("click", function() { 
    $(this).find(".level2").show(); 
    $(this).find(">span").hide(); 
    $(".level1>li").not(this).hide(); 
}) 

$(".lar").on("click", function() { 
    $(".level1>li").show(); 
    $(".level2").hide(); 
    $(this).closest(".level2").prev("span").show(); 
    return false; 
}) 

ul { 
    list-style-type: none; 
    margin:0; 
    padding:0; 
}