I would like to add an event with j-query where the user clicks outside the menu it animates slides the menu and closes the overlay opacity. Instead of using event.stopPropagation(); I would like to this: Jquery
我想添加一个带有j-query的事件,用户在菜单外点击它会动画菜单并关闭叠加层不透明度。而不是使用event.stopPropagation();我想这个:Jquery
$(this).click(function (event) {
if (!$(event.target).closest('').length) {
$("").hide();
}
});
I want to use this code in my jquery somehow. Here is my code: https://jsfiddle.net/2a4y4uds/2/
我想以某种方式在我的jquery中使用这段代码。这是我的代码:https://jsfiddle.net/2a4y4uds/2/
A little new to j-query so bear with me
j-query有点新,所以请耐心等待
2 个解决方案
#1
1
You could use variables.
你可以使用变量。
EDIT3 think i have fixed the bugs now.
EDIT3认为我现在修复了错误。
JavaScript/jQuery:
的JavaScript / jQuery的:
DEMO
var menuopen = false;
var menuclicked = false;
function animatemenu(){
if (!$(".c-menu--slide-left").hasClass("Moved")) {
$(".c-menu--slide-left").animate({
"left": "0px"
}, "slow").addClass("Moved");
$(".menu-overlay").fadeToggle("slow");
setTimeout(function(){ menuopen = true;}, 100);
// alert("open");
} else {
$(".c-menu--slide-left").animate({
"left": "-300px"
}, "slow").removeClass("Moved");
$(".menu-overlay").fadeToggle("slow");
setTimeout(function(){ menuopen = false, menuclicked = false;}, 100);
//alert("close");
}
}
$(document).ready(function () {
$(".menu").click(function () {
animatemenu();
menuopen = false;
});
$("#c-menu--slide-left").click(function () {
//alert("menu");
menuclicked = true;
setTimeout(function(){ menuclicked = false;}, 1);
});
});
$(document).click(function() {
if (menuclicked == false){
if (menuopen == true) {
animatemenu();
}
}
});
#2
0
I use this code:
我用这个代码:
// click anywhere hide the menus if it is visible
$('html').click(function(event) {
if ( $('#menu').is(':visible') ) {
var re = new RegExp("menu_div");
if (!event.target.id.match(re) ) {
$('#menu').hide();
}
}
});
#1
1
You could use variables.
你可以使用变量。
EDIT3 think i have fixed the bugs now.
EDIT3认为我现在修复了错误。
JavaScript/jQuery:
的JavaScript / jQuery的:
DEMO
var menuopen = false;
var menuclicked = false;
function animatemenu(){
if (!$(".c-menu--slide-left").hasClass("Moved")) {
$(".c-menu--slide-left").animate({
"left": "0px"
}, "slow").addClass("Moved");
$(".menu-overlay").fadeToggle("slow");
setTimeout(function(){ menuopen = true;}, 100);
// alert("open");
} else {
$(".c-menu--slide-left").animate({
"left": "-300px"
}, "slow").removeClass("Moved");
$(".menu-overlay").fadeToggle("slow");
setTimeout(function(){ menuopen = false, menuclicked = false;}, 100);
//alert("close");
}
}
$(document).ready(function () {
$(".menu").click(function () {
animatemenu();
menuopen = false;
});
$("#c-menu--slide-left").click(function () {
//alert("menu");
menuclicked = true;
setTimeout(function(){ menuclicked = false;}, 1);
});
});
$(document).click(function() {
if (menuclicked == false){
if (menuopen == true) {
animatemenu();
}
}
});
#2
0
I use this code:
我用这个代码:
// click anywhere hide the menus if it is visible
$('html').click(function(event) {
if ( $('#menu').is(':visible') ) {
var re = new RegExp("menu_div");
if (!event.target.id.match(re) ) {
$('#menu').hide();
}
}
});