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();
}
});
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'
$(document).one("click",function() {
if ($(".showed").is(":visible")) {
$(".pressed").trigger("click");
}
});
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.