PUG для HTMl с UIKIT v3

Я использую PUG в своих шаблонах и в фреймворке UIKIT V3 (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=""> что я думаю там нечего делать. Это добавляет пустые строки в меню - самое раздражающее;)

второй - это код непосредственно в HTML https://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? Но я не могу найти это - помощь оценена - спасибо

Источник

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
Источник
Другие вопросы по тегам