导航栏中的下拉菜单不起作用 - 下拉菜单中的项目全部 link 到同一件事（UIKit 框架）

Question

我希望发生的事情：导航栏中的前三个列表项应对应于内容区域中的前三个内容项。下拉列表中的三个列表项应与其余三个内容项相对应。将鼠标悬停在下拉图标上应该会显示列表，但下拉图标不应 link 到任何地方。

实际情况：前三个列表项正常工作，前三个内容项 link。下拉框动画正确，但其中的所有项目 link 到第 4 个内容项目。单击下拉框的图标也 links 到第 4 项。

这里是代码（生成了很多代码，所以我从FireBug那里抓取了代码，这就是为什么 "uk-active" 类和 "aria-hidden"属性在那里）：

<nav class="uk-navbar">
  <ul class="uk-navbar-nav" data-uk-switcher="{connect:'#content-area'}">
    <li class="uk-active" aria-expanded="true">
      <a href="">Dashboard</a>
    </li>
    <li aria-expanded="false">
      <a href="">Summary</a>
    </li>
    <li aria-expanded="false">
      <a href="">Details</a>
    </li>
    <li id="settings-btn-container" class="uk-parent" data-uk-dropdown="" aria-expanded="false" aria-haspopup="true">
      <a href="">
        <i class="uk-icon-cog"></i>
      </a>
      <div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom" aria-hidden="true" style="top: 40px; left: 0px;" tabindex="">
        <ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
          <li>
            <a href="">Upgrade</a>
          </li>
          <li>
            <a href="">Configure</a>
          </li>
          <li>
            <a href="">Settings</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

<ul id="content-area" class="uk-switcher">
  <li id="content-dashboard" class="parent.uk-container uk-container-center uk-active" aria-hidden="false">...</li>
  <li id="content-summary" aria-hidden="true">...</li>
  <li id="content-details" aria-hidden="true">...</li>
  <li id="content-upgrade" aria-hidden="true">...</li>
  <li id="content-config" aria-hidden="true">...</li>
  <li id="content-settings" aria-hidden="true">...</li>
</ul>

基本上，第 4 个内容项的 "on click" 事件处理程序被添加到 "settings-btn-container" 列表项中，并且没有事件处理程序被添加到下拉列表下的列表项中。我不知道如何让事件处理程序绑定到下拉列表项。

Answer 1

尝试向 UIkit Switcher 组件更明确地说明什么构成 "toggle"。

在下面的代码片段中，我使用了这些设置：

{
    connect: '#content-area',
    toggle: '.toggle-link'
}

UIkit Switcher 组件中 toggle 的默认值是 >*，您可能会将其识别为 "the first immediate child element of any type" 的选择器。由于下拉列表中的链接不是直接后代，因此单击它们时不会触发切换器事件。

通过将 "toggle" 定义扩展到切换器中的所有 .toggle-link 元素，您的每个链接都会映射到 #content-area 元素中相应的 <li>。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/js/uikit.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css'>

<nav class="uk-navbar">
    <ul id="switcher-menu" class="uk-navbar-nav" data-uk-switcher="{connect: '#content-area', toggle: '.toggle-link'}">
        <li class="uk-active toggle-link"><a href="">Dashboard</a></li>
        <li class="toggle-link"><a href="">Summary</a></li>
        <li class="toggle-link"><a href="">Details</a></li>
        <li id="settings-btn-container" class="uk-parent" data-uk-dropdown>
            <a href=""><i class="uk-icon-cog"></i></a>
            <div id="settings-dropdown-container" class="uk-dropdown uk-dropdown-navbar uk-dropdown-bottom">
                <ul id="settings-dropdown" class="uk-nav uk-nav-navbar">
                    <li class="toggle-link"><a href="">Upgrade</a></li>
                    <li class="toggle-link"><a href="">Configure</a></li>
                    <li class="toggle-link"><a href="">Settings</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

<div class="uk-container uk-container-center">
    <ul id="content-area" class="uk-switcher">
        <li class="uk-active">... (Dashboard)</li>
        <li>... (Content Summary)</li>
        <li>... (Content Details)</li>
        <li>... (Content Upgrade)</li>
        <li>... (Content Config)</li>
        <li>... (Content Settings)</li>
    </ul>
</div>

导航栏中的下拉菜单不起作用 - 下拉菜单中的项目全部 link 到同一件事（UIKit 框架）

Dropdown in nav bar not working - items in dropdown all link to the same thing (UIKit framework)

html

javascript

getuikit