Close div on click or tab outside

301
November 22, 2016, at 4:35 PM

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.

Answer 1

Have you tried this for your second problem?

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

on your third problem, have you tried setting the tabindex attribute of that menu to "0"? Then in your script, add the following:

     $("#idofyourmenu").blur(function(){$("#idofyourpopup").hide();});
READ ALSO
Sticky header animating in from the left on Safari

Sticky header animating in from the left on Safari

I'm using a sticky header and everything is fine, but, in Safari it animates in from the top left hand side when i scroll. It doesn't happen in firefox or chrome.

215
Not Able to Disable a div On Click by jQuery

Not Able to Disable a div On Click by jQuery

Can you please take a look at this code and let me know why I am not able to Disable the div on clicking.

239
Jquery/Ajax - Get Picture and Youtube in HTML

Jquery/Ajax - Get Picture and Youtube in HTML

So i'm back here again trying to figure out how to use HTML correct and can't get it to work correctly after been trying many hours with this. .

335
Scroll page at last slide (fullscreen vertical scroller)

Scroll page at last slide (fullscreen vertical scroller)

Is there a way to scroll below a slider once the slider reaches the last slide? Themepunch said it's possible via the API, but they didn't explain any further. .

297