javascript - 如何在页面底部显示事件的顶部菜单子(monad)项？

Question

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

示例:如果用户点击“第一”，它应该如下所示。

<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>

不使用 jquery 通过使用 html5 我们可以做到，如果你不喜欢评论我会用 jquery 更新 more..in fiddle