0

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

实际情况：前三个列表项正常工作并链接到前三个内容项。下拉框动画正确，但其中的项目都链接到第 4 个内容项目。单击下拉框的图标也链接到第 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 个内容项的“单击时”事件处理程序被添加到“settings-btn-container”列表项中，并且没有事件处理程序被添加到下拉列表下的列表项中。我不知道如何让事件处理程序绑定到下拉列表项。

4

1 回答 1

1

尝试对 UIkit Switcher 组件更明确地了解什么是“切换”。

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

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

toggleUIkit Switcher 组件中,的默认值是>*，您可能会将其识别为“任何类型的第一个直接子元素”的选择器。由于下拉列表中的链接不是直接后代，因此单击它们时不会触发任何 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>

于 2016-11-16T13:59:43.490 回答