-1

私は次のようなメニューを持っています

<li class="main-menu">
  <a accesskey="a">menu item 1</a>
  <ul>
    <li>
      <a accesskey="d">submenuItem1</a>
    </li>
    <li class="submenu">
      <a accesskey="e">submenuItem2</a>
      <ul>
        <li class="innermenu"><a >innerMenuItem1</a></li>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem2</a></li>
        <li><a>innerMenuItem3</a></li>
        <li><a>innerMenuItem4</a></li>
      </ul>
    </li>
  </ul>
</li>

メインメニュー項目が選択されているときにサブメニューをホバー/表示し、サブメニューが選択されているときに内部メニュー項目を表示する方法。jqueryに非常に慣れていないため、特にサブメニューを内部メニューに実行する際にいくつかの問題があります.ありがとう..

4

1 に答える 1

0

accesskey実際にはキーと組み合わせてのみ機能しaltます。一般的なキーダウン イベントをインターセプトし、その方法でホットキーを処理できます。キーダウンをインターセプトし、それがキーの 1 つである場合.active、関連する でクラスをトグルしますli。次に、CSS を使用して、ホバー/クラスのステータスに基づいてサブメニューを非表示および表示します。

以下の例では、属性を使用してdata-key属性を設定します。ページの読み込み時に、キーと関連する要素を配列に抽出します。この配列は、 が処理されるときにスキャンされ、処理さkeydownれます。

jsフィドル

HTML

<ul class="main-menu">
<li data-key="65">
  <a>menu item 1 (a)</a>
  <ul>
    <li data-key="68">
      <a>submenuItem1 (d)</a>
    </li>
    <li data-key="69">
      <a>submenuItem2 (e)</a>
      <ul>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem1</a></li>
        <li><a>innerMenuItem2</a></li>
        <li><a>innerMenuItem3</a></li>
        <li><a>innerMenuItem4</a></li>
      </ul>
    </li>
  </ul>
</li>
</ul>

CSS

li ul {
    display:none;
}

li:hover > ul,
li.active > ul {
    display:block;
}

JS

var keys = [];

$(document).ready(function () {
    $('[data-key]').each(function () {
        keys.push({
            key: $(this).attr('data-key'),
            elem: $(this)
        });
    });
});

$(window).keydown(function(e) {
    for (var i = 0; i < keys.length; i++) {
        if (e.keyCode == keys[i].key) {
            keys[i].elem.toggleClass('active');
            return;
        }
    }
});
于 2013-04-06T18:20:17.860 に答える