0

実現したいこと: ナビゲーション バーの最初の 3 つのリスト項目は、コンテンツ領域の最初の 3 つのコンテンツ項目に対応する必要があります。ドロップダウンの 3 つのリスト項目は、残りの 3 つのコンテンツ項目に対応する必要があります。ドロップダウン アイコンにカーソルを合わせるとリストが表示されますが、ドロップダウン アイコンはどこにもリンクされません。

実際に起こっていること: 最初の 3 つのリスト項目は適切に機能し、最初の 3 つのコンテンツ項目にリンクしています。ドロップダウン ボックスは適切にアニメーション化されますが、その中のアイテムはすべて 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 に答える