PUG в HTMl с UIKIT v3

Я использую PUG в своих шаблонах и фреймворке UIKIT V3 (getuikit.com). Моя проблема заключается в том, что я делаю выпадающий элемент на моей панели навигации: лучшее объяснение - с этими двумя ручками кода, которые показывают, что происходит. мопс: 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? Но я не могу его найти - помощь оценена - спасибо


pug getuikit
person Pat070    schedule 28.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я считаю, что это то, что вы хотите (на основе вашего второго кода). Обратите внимание, что 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
person Graham    schedule 28.10.2018
comment
Спасибо ! Теперь я вижу ошибку - я искал довольно долго, и теперь, когда вы указали на нее, это очевидно! - person Pat070; 28.10.2018