javascript - 如何在Vanilla JS中循环菜单和子菜单(How looping Menu & Submenus in Vanilla js)

Question

How looping Menu & Submenus in Vanilla js?

(如何在Vanilla JS中循环菜单和子菜单？)

What would be the correct procedure to loop thru a nested menu?

(什么是通过嵌套菜单循环的正确程序？)

Thanks in advance.

(提前致谢。)

JSON:

(JSON：)

[
   {
      "name":"Home",
      "link":"/",
      "subMenus":[
         {
            "name":"Sub Menu 1-2"
         },
         {
            "name":"Sub Menu 1-2"
         },
         {
            "name":"Sub Menu 1-3"
         }
      ]
   },
   {
      "name":"About",
      "link":"/#/about"
   },
   {
      "name":"Pages"
   },
   {
      "name":"News",
      "subMenus":[
         {
            "name":"Sub Menu 4-2"
         },
         {
            "name":"Sub Menu 4-2"
         },
         {
            "name":"Sub Menu 4-3"
         }
      ]
   },
   {
      "name":"Contacts"
   }
]

HTML:

(HTML：)

<nav class="header-nav">
  <ul class="main-menu">
    <li>
      <a href="#" class="active">
        Home
      </a>
    </li>
    <li>
      <a href="#">About Us</a>
    </li>
    <li>
      <a href="#">Pages</a>
      <ul class="sub-menu">
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Loans</a>
        </li>
        <li>
          <a href="#">elements</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

  ask by LukDev translate from so

Answer 1

等待大神答复