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菜单不在一个元素中，而且还有一个额外的空白＆＃39; a＆＃39;在.sub-menu。

是否可以在哈巴狗中创建多级迭代？感谢

Answer 1

您可以在某些元素中添加元素，这有一些限制。您无法在div元素中使用p。

这是为了确保标记尽可能保持语义。谁需要PARAGRAPH中的DIV元素？即使在一般意义上，我们也没有看到在div中有p的任何含义，div是块级元素，a元素只能包含最初不是块元素的元素。我有趣地发现你可以在一个锚元素中有一级DIV嵌套，它会起作用，但除此之外它会破坏。

在锚元素中使用span元素然后使用CSS使其成为块级元素，嵌套应该在锚元素内部与span完全一致。

本文档可能有助于了解哪些元素与哪些元素相匹配 - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content

Answer 2

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>

Answer 3

我发现这不是哈巴狗的问题，而是浏览器的行为。

像这样的代码

<a>11
  <div>22
    <a>33</a>
  </div>
</a>

不会按预期嵌套。目前，我用div替换tag a并用css模拟链接。仍对此感到好奇。

HTML标记嵌套问题

3 个答案: