1

ドロップダウン メニューをプッシュ メニューに置き換えようとしています。当初、ドロップダウンはメインのナビゲーション リンクの隣にネストされていました。キーボードで Tab を使用すると、意図したとおりに機能しました。例：

<li>
  <a href="#" name="#women">WOMEN</a>          <!-- *Main Navigation -->
  <ul id="women">                              <!-- *Submenu         -->
    <li><a href="#">Women</a></li>
    <li><a href="#">Women's Plus</a></li>
    <li><a href="#">Petites</a></li>
  </ul>
</li>

プッシュ メニューの場合、HTML の構造は異なります。例：

<ul>                                           <!-- *Main Navigation -->
  <li><a href="#" name="#women">Women</a></li>
  <li><a href="#" name="#accessories">Accessories</a></li>
</ul>

<div>                                          <!-- *Submenus        -->
  <ul id="women">
    <li><a href="#">Women</a></li>
    <li><a href="#">Women's Plus</a></li>
    <li><a href="#">Petites</a></li>
  </ul>

  <ul id="accessories">
    <li><a href="#">Women</a></li>
    <li><a href="#">Men</a></li>
  </ul>

</div>

私が直面している問題は、キーボードのタブがサブメニューを完全に見逃していることです。で使用しようとしfocus()まし$(ahrefname).find('a').first().focus();たが、機能しないため、何かが欠けているに違いありません。

$(document).ready(function() {
$('.lp-sub-menu ul').each(function () {
    height = $(this).height();
    $(this).transition({
        y: +-+height + 'px'
    });
});

var heights = $('.lp-sub-menu > ul').map(function () {
    return $(this).height();
}).get(),
    maxHeight = Math.max.apply(null, heights);

$('#top').on('click focus', 'a', function (e) {
        "use strict";
        e.preventDefault();

        var ahrefname = this.name,
            eLeft = $(this).offset().left,
            percent = 100 / $(window).width() * eLeft,
            submenuHeight = $(ahrefname).height();

        if ($(ahrefname).siblings().hasClass('active-sub-menu')) {
            $(this).parents('ul').find('a').removeClass('active-menu').find('span').css({
                'visibility': ''
            });
            $(ahrefname).siblings().transition({
                y: +-+maxHeight + 'px'
            }).delay(10).queue(function (next) {
                $(ahrefname).siblings().removeClass('active-sub-menu').css({
                    'margin-left': ''
                });
                next();
            });
            $('.lp-sub-menu').transition({
                height: +submenuHeight + 'px'
            });
            $(ahrefname).css({
                'margin-left': percent + '%'
            }).delay(4).queue(function (next) {
                $(ahrefname).addClass('active-sub-menu').transition({
                    y: +0 + 'px'
                });
                next();
            });
            $(this).addClass('active-menu').find('span').css({
                'visibility': 'visible'
            });
        } else if ($(ahrefname).hasClass('active-sub-menu')) {
            $('.lp-sub-menu').transition({
                height: +-+submenuHeight + 'px'
            });
            $(ahrefname).removeClass('active-sub-menu').transition({
                y: +0 + 'px'
            }).css({
                'margin-left': ''
            });
            $(this).removeClass('active-menu').find('span').css({
                'visibility': ''
            });;
        } else {
            $('.lp-sub-menu').transition({
                height: +submenuHeight + 'px'
            });
            $(ahrefname).find('a').first().focus();

        });
});

JS Fiddleが動作しています。どんな助けでも大歓迎です！

アップデート：

ありがとう@ヒュンケルン！サブメニューに焦点を当てることはできましたが、次のメニュー項目に問題があり、サブメニューが開きませんでした。関数を次のように更新しました...

$('.lp-sub-menu ul').each(function(){

    var height = $(this).height(),
        oid = $(this).attr('id');

    $(this).transition({ y: + - + height + 'px' });

    $(this).find('a:last').focusout(function(){
        $( "[name|='#"+oid+"']" ).focus();
    });

});

サブメニューが閉じます。もう一度タブを押すと、次のサブメニューが開きます。多分それは良いことですか？わからない。これが最新のJS Fiddleです。(jsFiddle でタブ操作がうまく機能しないのはなぜですか?結果を確認するには、ローカルでテストする必要があります。)

4

1 に答える 1

0

これを機能させるために、いくつかのことを作成しました。最初に、次の行を移動する必要があります。

$(ahrefname).find('a').first().focus();

この行のすぐ隣：

$(ahrefname).css({'margin-left' : percent + '%'}).delay(4).queue(function(next){
  $(ahrefname).addClass('active-sub-menu').transition({ y: + 0 + 'px'});
  next();
  //place it here!!!
});

したがって、フォーカス関数を呼び出すと、オブジェクトはフォーカス可能になります。

2 つ目は、現在のサブメニューの最後の項目をぼかしたときに、次のメニューにフォーカスすることです。あなたの機能にいくつかの変更を加えて作成しました：

$('.lp-sub-menu ul').each(function(){
height = $(this).height();
$(this).transition({ y: + - + height + 'px' });
    $(this).find("a:last").focusout(function(e){
        var oid = $(this).parent().parent().attr("id");
        $( "[name|='#"+oid+"']" ).parent().next().find("a").focus();

    });
});

そして、私が得た場所があります。これをライブで見ることができます: http://jsfiddle.net/wxxb4/6/。

于 2013-11-05T01:06:42.357 に答える