javascript - HTML标签嵌套问题

Question

已编辑:我以为这是哈巴狗问题，但事实并非如此。

这是代码

- var list = [1, 2, 3, 4, 5]
.navbar.clearfix
  a.logo(href="#") Logo
  div.links
    each i in list
      a(href="#")= 'Link ' + i
        .sub-menu
          each i in list
            a(href="#")= 'Link ' + i

问题是 .sub-menu 不在 a 元素中，并且 .sub-menu 中多了一个空白“a”。

是否可以在 pug 中创建多级迭代？谢谢

Answer 1

HTML 禁止嵌套交互元素。您不能将一个链接放置在另一个链接中。

一系列带有子菜单的菜单的传统标记是嵌套列表:

<ul>                  <!-- Top level menu -->
    <li>
        <a href="...">     Top level link </a>
        <ul>          <!-- Sub menu -->
            <li>
                 <a href="..."> Sub menu link </a>
            </li>
        </ul>
    </li>
</ul>