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>

在我看来，它遵循这里的示例：https://getuikit.com/docs/navbar#usage

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>
    <div class="uk-navbar-left">

       
    Logo


    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Should Dropdown</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                         <a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>
                        
                        
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</nav>