Question

편집 : 나는 이것이 퍼그 문제라고 생각하지만 그렇지 않습니다.

여기에 문제가 .SUB 메뉴는 a 요소에 있지있는 코드

- 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 

이며,이 여분의 공백 'A'.SUB 메뉴입니다.

pug에서 다중 레벨 반복을 만들 수 있습니까? 감사합니다

Answer 1

일부 요소 안에 넣을 수있는 요소에는 몇 가지 제한 사항이 있습니다. p 요소 안에 div을 사용할 수 없습니다.

마크 업을 최대한 의미 론적으로 유지하기위한 것입니다. 누가 PARAGRAPH 내부에 DIV 요소가 필요합니까? 일반적인 의미 에서조차 p에 div을 갖는 의미는 보이지 않지만 div은 블록 레벨 요소이고 a 요소는 처음에는 블록 요소가 아닌 요소 만 포함 할 수 있습니다. 흥미롭게도 앵커 요소에서 DIV 중첩의 1 단계를 가질 수 있다는 것을 알았습니다.

앵커 요소 내부에 span 요소를 사용하고 CSS를 사용하여 블록 수준 요소로 만들면 중첩 요소가 앵커 요소 내부에 span으로 완전히 작동합니다.

이 문서는 요소가있는 잘 재생의 이해에 도움이 될 수있는 것들 - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content

Answer 2

나는 이것이 pug의 문제는 아니지만 브라우저의 행동을 발견했습니다. 예상대로이

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

같은

코드는 중첩되지 않습니다. 현재 나는 태그 a를 div로 대체하고 CSS와 링크를 에뮬레이션합니다. 아직도 궁금해.

Answer 3

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>