Раскрывающийся список на панели навигации не работает - все элементы в раскрывающемся списке ссылаются на одно и то же (структура UIKit)

Что бы я хотел сделать: первые три элемента списка на панели навигации должны соответствовать первым трем элементам содержимого в области содержимого. Три элемента списка в раскрывающемся списке должны соответствовать оставшимся трем элементам содержимого. При наведении указателя мыши на значок раскрывающегося списка должен отображаться список, но значок раскрывающегося списка не должен никуда указывать.

Что на самом деле происходит: первые три элемента списка работают правильно и связаны с первыми тремя элементами содержимого. Выпадающий список анимируется правильно, но все элементы в нем ссылаются на 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», и никакие обработчики событий не добавляются к элементам списка в раскрывающемся списке. Я не могу понять, как вместо этого привязать обработчики событий к элементам раскрывающегося списка.


javascript html getuikit
person Chris.B    schedule 15.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Постарайтесь более подробно рассказать компоненту UIkit Switcher о том, что представляет собой «переключатель».

В приведенном ниже фрагменте я использовал следующие настройки:

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

Значение по умолчанию для toggle в компоненте UIkit 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>

person Cameron Hurd    schedule 16.11.2016