ページの下部にアクティブなトップメニューのサブ項目を表示する方法は？

Question

私はサブメニューを持ついくつかのアイテムを持つトップメニューを持っています。ユーザーがサブアイテムを持つアイテムをクリックすると、これらのサブアイテムが下部メニューに表示され、ページの下部に到達したときに別のサブアイテムに進むことが容易になります。

例：ユーザーが「First」をクリックすると、以下のようになります。アウトjQueryを使って

<nav id='top-menu'> 
 
    <ul> 
 
    <li> 
 
     <a href='#'>First</a> 
 
     <ul> 
 
     <li> 
 
      <a href='#'>Sub-first</a> 
 
     </li> 
 
     <li> 
 
      <a href='#'>Sub-second</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href='#'>Second</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<article> 
 
    Article text 
 
</article> 
 

 
<nav id='bottom-menu'> 
 
    <ul> 
 
    <li> 
 
     <a href='#'>Sub-first</a> 
 
    </li> 
 
    <li> 
 
     <a href='#'>Sub-second</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

<details> 
    <summary>Heading #1</summary> 
    <nav> 
     <a href="#">Link A</a> 
    </nav> 
    </details> 
    <details> 
    <summary>Heading #1</summary> 
    <nav> 
     <a href="#">Link B</a> 
    </nav> 
    </details> 

我々はそれを行うことができ、HTML5を使用することにより、あなたはコメントを好まない場合、私はあなたのjQueryを使用している場合、あなたが試すことができますjqueryのmore..in fiddle

Answer 2

で更新されますこのようなもの：

var $bottomContainer = $('#bottom-menu'); 
$('#top-menu a').on('click', function(e){ 
    e.preventDefault(); 
    var $submenu = $(e.target).siblings('ul'); 
    if (!$submenu.length) return; 

    $bottomContainer.empty().append($submenu.clone()); 
});