UIKit 导航栏不下降
UIKit navbar not dropping down
我有一个 UIkit 导航栏,但下拉菜单不起作用。我在这里看到了类似的 post,建议 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
这应该有效:
<!-- 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>
我有一个 UIkit 导航栏,但下拉菜单不起作用。我在这里看到了类似的 post,建议 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
这应该有效:
<!-- 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>