javascript - 导航栏中的下拉菜单不起作用 - 下拉菜单中的项目都链接到同一事物(UIKit 框架)

Question

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

实际发生的情况:前三个列表项正常工作并链接到前三个内容项。下拉框动画正常，但其中的项目全部链接到第四个内容项目。单击下拉框的图标也会链接到第四项。

这是代码(生成了很多代码，所以我从 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>

基本上，第四个内容项的“单击”事件处理程序被添加到“settings-btn-container”列表项中，并且没有事件处理程序被添加到下拉列表下的列表项中。我不知道如何让事件处理程序绑定(bind)到下拉列表项。

Answer 1

尝试对 UIkit Switcher 组件更明确地了解“切换”的构成。

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

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

toggle 的默认值，在 UIkit Switcher 组件中是 >* ，您可能会认为它是“任何类型的第一个直接子元素”的选择器。由于下拉列表中的链接不是直接后代，因此单击它们时不会触发任何切换器事件。

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

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