如何在页面底部显示活动的顶级菜单子项？

Question

我有一个顶级菜单，其中包含一些包含子项目的项目。如果用户点击具有子项目的项目，我希望这些子项目显示在底部菜单中，这样当一个项目到达页面底部时，很容易继续到另一个子项目。

示例：如果用户点击“First”，它应如下所示。

<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

如果您使用jQuery，可以尝试这样的事情：

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