PUG to HTMl with UIKIT v3

Question

我在我的模板和 UIKIT V3 框架中使用 PUG (getuikit.com) 我的问题是当我在导航栏中执行下拉项时：最好的解释是用这 2 支代码笔，它显示了正在发生的事情第一个是哈巴狗：https://codepen.io/prtome/pen/wYoMpq

nav.uk-navbar-container.uk-dark(data-uk-navbar data-uk-sticky)
  .uk-navbar-left
    ul.uk-navbar-nav.no-print
      li
         a(href="/" class="nur-icon-button" data-uk-icon="icon: home; ratio: 1.5")
      li
        a(href="") HERE
          .uk-navbar-dropdown
             ul.uk-nav.uk-navbar-dropdown-nav
               li.uk-active
                 a(href="") ALPHA
               li
                 a(href="") BETA

结果HTML代码是

  <nav class="uk-navbar-container uk-dark uk-navbar uk-sticky uk-sticky-fixed" data-uk-navbar="data-uk-navbar" data-uk-sticky="data-uk-sticky" style="position: fixed; top: 0px; width: 1379px;">
    <div class="uk-navbar-left">
      <ul class="uk-navbar-nav no-print">
        <li><a class="nur-icon-button uk-icon" href="/" data-uk-icon="icon: home; ratio: 1.5"><svg...></svg></a></li>
        <li><a href="" class="uk-open" aria-expanded="true">HERE</a>
          <div class="uk-navbar-dropdown uk-open uk-navbar-dropdown-bottom-left" style="left: 60px; top: 80px;">
            <a href=""></a>
            <ul class="uk-nav uk-navbar-dropdown-nav">
               <a href=""></a>
              <li class="uk-active"><a href=""></a><a href="">ALPHA</a></li>
             <li><a href="">BETA</a></li>
            </ul>
         </div></li>
      </ul>
   </div>
 </nav>

如您所见，有多个 <a href=""> 我认为与那里无关。这会在菜单中添加空行 - 最烦人 ;)

第二个就是代码直接在HTMLhttps://codepen.io/prtome/pen/oaYjOV 没有额外的 <a href="> ，并且在不添加它们的情况下呈现。

这是所需的 HTML 输出：

<nav class="uk-navbar-container" uk-navbar>

    <div class="uk-navbar-left">

        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#" class="nur-icon-button" data-uk-icon="icon: home; ratio: 1.5"></a></li>
            <li>
                <a href="#">HERE</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">ALPHA</a></li>
                        <li><a href="#">BETA</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>

</nav>

我想我的哈巴狗代码中有一个错误导致它添加了所有这些 href ？但我找不到它 - 感谢帮助 - 谢谢

Answer 1

我相信这就是您想要的（基于您的第二个代码笔）。请注意 a(href='#') HERE 与其下方的下拉列表一致，而不是嵌套。我将这只哈巴狗粘贴到您的第一个代码笔中，它给出了预期的结果。

nav.uk-navbar-container(uk-navbar='')
  .uk-navbar-left
    ul.uk-navbar-nav
      li.uk-active
        a.nur-icon-button(href='#' data-uk-icon='icon: home; ratio: 1.5')
      li
        a(href='#') HERE
        .uk-navbar-dropdown
          ul.uk-nav.uk-navbar-dropdown-nav
            li.uk-active
              a(href='#') ALPHA
            li
              a(href='#') BETA

PUG to HTMl with UIKIT v3

PUG to HTMl with UIKIT v3

getuikit

pug