UIKit导航栏未下拉

问题描述

我有一个UIkit导航栏，但下拉菜单不起作用。我在这里看到过类似的帖子，提示可能是jquery，但是我尝试了以我能想到的所有方式安装jquery。话虽如此，它似乎确实是一个JavaScript问题。我目前在应用程序中愉快地使用jquery。我正在使用webpacker，并且看到chrome调试器的“源”选项卡上存在uikit和uikit图标。 这是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

解决方法

这应该工作：

<!-- 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>