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>

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