0

I've got a page with a pretty standard popup menu in the header. The specs say that the user needs to be able to close it in three ways:

  1. by clicking outside the menu
  2. by clicking the link that expands it a second time (slidetoggle)
  3. by tabbing outside the menu

I have the first one working, but I can't seem to figure out the other two. When you click the link a second time, it slides up, and then slides back down. And I've tried using the jquery "focusout" to get the menu to close when the user tabs out, but no luck.

Here's my js:

$("#body").mouseup(function (e) {
    var subject = $("#shell-user-account-details");
    if (e.target.id != subject.attr('id') && !subject.has(e.target).length) {
        subject.hide();
    }
    $("#shell-user-account-details").attr('aria-hidden', function (i, attr) {
        return attr == 'true' ? 'false' : 'true';
    }).attr('aria-expanded', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    });
});

$(document).on('click', '#shell-user-account-link', function (event) {
    $('#shell-user-account-details').slideToggle().attr('aria-expanded', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    }).attr('aria-hidden', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    })
});

And here's a Fiddle: https://jsfiddle.net/tactics/u4quaje0/2/

Thanks.

4

1 に答える 1

-1

2番目の問題でこれを試しましたか？

     $("#idofyourlink").click(function(){$("#idofyourpopup").toggle();})

3番目の問題で、tabindexそのメニューの属性を「0」に設定してみましたか? 次に、スクリプトに次を追加します。

     $("#idofyourmenu").blur(function(){$("#idofyourpopup").hide();});
于 2015-10-22T00:30:05.213 に答える