マルチレベルの順序付けられていないリストを対話的な水平メニューに変換する

Question

ネストされた順序付けられていないリストがあります。私はお互いの下に水平メニューとしてこれを表示する必要があります。最大の問題は、このリストにいくつのレベルがあるか分かりません。したがって、nレベルのリストの深さで機能する機能を作成したいと思います。リストの

例：

<ul id="data"> 
    <li> 
     <h1>Menu 1</h1> 
     <ul> 
      <li> 
       <h1>Menu 1-1</h1> 
       <ul> 
        <li> 
         <div>Some content A</div> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <h1>Menu 1-2</h1> 
       <ul> 
        <li> 
         <div>Some content B</div> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <h1>Menu 2</h1> 
     <ul> 
      <li> 
       <h1>Menu 2-1</h1> 
       <ul> 
        <li> 
         <div>Some content C</div> 
        </li> 
       </ul> 
      </li> 
      <li> 
       <h1>Menu 2-2</h1> 
       <ul> 
        <li> 
         <div>Some content E</div> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

これが機能する方法のアイデアは、次のとおりです。

Menu 1 Menu 2 
Menu 1-1 Menu 1-2 

その他のリストはデフォルトでは非表示になっています。私はメニュー2をクリックすると結果がでなければなりません：

Menu 1 Menu 2 
Menu 2-1 Menu 2-2 

私は特定の<h1>をクリックすると、この要素と同じレベルの<ul>要素が子<h1>を持っていない、要素<div>は、メニューの下に表示されます。私たちの場合：メニュー1-1 divをクリックすると、コンテンツ 'Some content A'が表示されます。

私は再帰を試み、CSSを使用していますが、動作させることができません。 Thnxは事前に。

Answer 1

私はあなたが必要とjQueryのコードがあると思う：

$(function(){ 
    $('h1').click(function(){ 
     var parentUl = $(this).closest('ul'); 
     if (parentUl.hasClass('active')) { 
      var sibsWithActive = parentUl.find('ul.active'); 
      if (sibsWithActive) { 
       sibsWithActive.removeClass('active'); 
       $(this).siblings('ul').addClass('active'); 
      } else { 
       $(this).siblings('ul').addClass('active'); 
      } 
     } else { 
      $('ul.active').removeClass('active'); 
      $(this).siblings('ul').addClass('active'); 
     } 
    }); 
}); 

私はここでそれを実証jsfiddleドキュメント作成されました：http://jsfiddle.net/nLgVt/

明らかにCSSが初歩的なうたです。

Answer 2

私はそれが少し遅れて知っているが、これを見て：http://jsfiddle.net/sxDbu/1/

HTML

<div id="outer-wrapper"> 
    <ul id="data"> 
    <li><h1>Menu 1</h1> 
     <ul> 
     <li><h1>Menu 1-1</h1> 
      <ul> 
      <li><div>Some content A</div></li> 
      </ul> 
     </li> 
     <li><h1>Menu 1-2</h1> 
      <ul> 
      <li><h1>Menu 1-2-1</h1> 
       <ul> 
       <li><h1>Menu 1-2-1-1</h1> 
        <ul> 
        <li><div>Some content A</div></li> 
        </ul> 
       </li> 
       <li><h1>Menu 1-2-1-2</h1> 
        <ul> 
        <li><div>Some content B</div></li> 
        </ul> 
       </li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><h1>Menu 2</h1> 
     <ul> 
     <li><h1>Menu 2-1</h1> 
      <ul> 
      <li><div>Some content C</div></li> 
      </ul> 
     </li> 
     <li><h1>Menu 2-2</h1> 
      <ul> 
      <li><div>Some content D</div></li> 
      </ul> 
     </li> 
     <li><h1>Menu 2-3</h1> 
      <ul> 
      <li><div>Some content D</div></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS

#outer-wrapper { 
    position: relative; 
} 

ul { 
    position: absolute; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    left: 0; 
    right: 0; 
} 

ul ul { 
    display: none; 
} 

li { 
    float: left; 
    cursor: pointer; 
} 

li.active > h1 { 
    background: #171717; 
    color: #fff; 
} 

li.active > ul { 
    display: block; 
} 

JS

$(function() { 
    "use strict"; 

    $('#outer-wrapper').on('click', 'li', function() { 
    $(this).closest('ul').find('li').removeClass('active'); 
    $(this).addClass('active'); 
    return false; 
    }); 
});