Close pop-up menu by clicking anywhere on the page

Question

I have the following code:

var toggleButton = $('.menu-toggle'),
timerDelay;
toggleButton.on("click", function() {
    var elem = $(this),
    menu = elem.siblings('ul'),
    parent = elem.parent(),
    parentParent = parent.parent(),
    pageH = $(window).height();
    elem.toggleClass('pressed');
    menu.stop(true);
    clearTimeout(timerDelay);
    if (menu.is('.scrollable')) {
        menu.css({"max-height": pageH - 80});
    }
    parent.toggleClass('showed');
    if (menu.is('.parent')) {
        parentParent.toggleClass('showed');
    }
    if (menu.is('.hidden')) {
        menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
    } else {
        menu.toggleClass('hidden showed');
        if (menu.is('.nodelay')) {
            menu.css({"height": 0, "padding": ""});
        } else {
            timerDelay = setTimeout(function() {
                menu.css({"height": 0, "padding": ""});
            }, 450);
        }
    }
});

This is the code for a pop-up menu. The problem is that it requires clicking on a specific button to close it. I'm trying to also make it close whenever the user clicks anywhere on the page.

Is there a way?

Maybe I gave the wrong code. This is another section:

$(document).click(function (e)
{
var container = $("#wrapper");

if (!container.is(e.target) && container.has(e.target).length === 0 &&      event.target.id!=="menu-toggle")
{
    container.addClass("toggled"); 
}
});

Could I mix it with this?

$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
{
    container.hide();
}
});

http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Devin H., Jun 02 '15 at 14:30
Would a live example work? http://djdb.me/ (it's the menu on the top, near the logo) — DJDB, Jun 02 '15 at 14:31

Seth McClaine · Answer 1 · 2015-06-02T15:02:35.090

Without a working example...

You can do something like this:

var toggleButton = $('.menu-toggle'),
    timerDelay;

toggleButton.on("click", toggleDisplay);

function toggleDisplay() {

    var elem = $(this),
        menu = elem.siblings('ul'),
        parent = elem.parent(),
        parentParent = parent.parent(),
        pageH = $(window).height();
    elem.toggleClass('pressed');
    menu.stop(true);
    clearTimeout(timerDelay);
    if (menu.is('.scrollable')) {
        menu.css({"max-height": pageH - 80});
    }
    parent.toggleClass('showed');
    if (menu.is('.parent')) {
        parentParent.toggleClass('showed');
    }
    if (menu.is('.hidden')) {
        menu.css({"height": "100%", "padding": 5}).toggleClass('hidden showed');
        $(window).addEventListener('click', toggleButton);
    } else {
        menu.toggleClass('hidden showed');
        if (menu.is('.nodelay')) {
            menu.css({"height": 0, "padding": ""});
        } else {
            timerDelay = setTimeout(function() {
                menu.css({"height": 0, "padding": ""});
            }, 450);
        }
        $(window).removeEventListener('click', toggleDisplay);
    }
}

addEventListener to the window when it is show. When window is clicked run the toggle function.

removeEventListener from the window when it is hidden.

One issue this still has is that if the menu is clicked it will still hide, so you would need to add logic that if the menu is clicked to return;

Update After looking at you're live example.... Instead of using window you can use '.blog-content'

`toggleButton.on("click", );` missing `handler` `toggleDDisplay` ? — guest271314, Jun 02 '15 at 14:46
Yes.... sorry should be `toggleButton.on("click", toggleDisplay);` and the function should just be `toggleDisplay` — Seth McClaine, Jun 02 '15 at 15:02

score 0 · Answer 2 · answered Jun 02 '15 at 14:43

0

$(document).one("click",function() {
  if ($(".showed").is(":visible")) {
    $(".pressed").trigger("click");
  }
});

answered Jun 02 '15 at 14:43

guest271314

1
15
104
177

score 0 · Answer 3 · answered Jun 02 '15 at 14:56

This would help, provided your menu has a class 'menu'.

$('.menu, .menu-toggle').on('click', function(e) {
    e.stopPropagation();
});

$('body').on('click', function(e) {
    if($('.menu').hasClass('showed')){
        //code to hide menu 
        // i have clicked the toggle button here since the logic to hide menu is not separate in your code
        toggleButton.click();
    }
});

Here is an example jsfiddle: https://jsfiddle.net/okbpxb14/

Close pop-up menu by clicking anywhere on the page

3 Answers3