UIKit 导航栏不下降

Question

我有一个 UIkit 导航栏，但下拉菜单不起作用。我在这里看到了一个类似的帖子，建议 jquery 可能是问题所在，但我已经尝试以我能想到的所有方式安装 jquery。话虽如此，它看起来确实像是一个 javascript 问题。不过，我目前很高兴在应用程序中使用 jquery。我正在使用 webpacker，我看到 uikit 和 uikit 图标出现在 chrome 调试器的源选项卡上。这是 haml 和生成的 html：

%nav#navbar.uk-navbar-container.uk-navbar

  #logo.uk-navbar-left

    Logo

  #user-navbar.uk-navbar-right

    - if user_signed_in?

      %ul.uk-navbar-nav

        %li.uk-parent

          %a{href: '#'} #{current_user.display_name}

          .uk-navbar-dropdown

            %ul.uk-nav.uk-navbar-dropdown-nav

              %li

                = link_to 'Sign out', '/users/sign_out', :method => :delete

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

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

    Logo

  </div>

  <div class="uk-navbar-right" id="user-navbar">

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

      <li class="uk-parent">

        <a href="#">Should Dropdown</a>

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

          <ul class="uk-nav uk-navbar-dropdown-nav">

            <li>

              <a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>

            </li>

          </ul>

        </div>

      </li>

    </ul>

  </div>

</nav>

Answer 1

这应该工作：<!-- UIkit CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/css/uikit.min.css" /><!-- UIkit JS --><script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit.min.js"></script><script src="https://cdn.jsdelivr.net/npm/uikit@3.5.9/dist/js/uikit-icons.min.js"></script><nav class="uk-navbar-container" uk-navbar>&nbsp; &nbsp; <div class="uk-navbar-left">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; Logo&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="uk-navbar-right">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="uk-navbar-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Should Dropdown</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="uk-navbar-dropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="uk-nav uk-navbar-dropdown-nav">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></nav>&nbsp;