Javascript 汉堡菜单单击动画问题
问题是,例如,当我处于移动窗口模式时,我点击汉堡,然后在不关闭汉堡的情况下,缩小到更大的分辨率,再次缩小到移动大小,然后点击汉堡,我会看到它被激活了,但它实际上没有激活汉堡菜单滑下 在这里你可以看到这个例子! 非常感谢您的帮助Javascript 汉堡菜单单击动画问题,javascript,jquery,html,css,css-animations,Javascript,Jquery,Html,Css,Css Animations,问题是,例如,当我处于移动窗口模式时,我点击汉堡,然后在不关闭汉堡的情况下,缩小到更大的分辨率,再次缩小到移动大小,然后点击汉堡,我会看到它被激活了,但它实际上没有激活汉堡菜单滑下 在这里你可以看到这个例子! 非常感谢您的帮助 /// create a list and append to mobilemenu var $select = $("<ul></ul>"); $("#mobileMenu").append($select); //// Get eac
/// create a list and append to mobilemenu
var $select = $("<ul></ul>");
$("#mobileMenu").append($select);
//// Get each element in the menu li
$( "#menu li" ).each(function(){
//SELECTING ELEMENT RELATED TO THE FUNCTION
var $anchor = $(this);
// SELECTING THE LIST IN FUTURE THE MENU
var $li = $("<li></li>");
// ADDING TEXT FROM EACH ANCHOR TO THE LIST
$li.text($anchor.text());
/// ADDing the list item to the unorderd list
$select.append($li);
});
var isclicked = false;
// USER CLICKING ON THE BURGER AND ACTIVATEING THE MENU
$(".burger").click(function(event){
event.preventDefault();
$(this).toggleClass('active');
/// IF THE BURGER MENU IS CLICKED FADE OUT THE LIST ITEMS AND SCROLL UP THE BACKGROUND
if (isclicked === true) {
$("#menu").animate({
height: "80px",
}, 1500 );
$("#mobileMenu li").fadeOut(1000);
isclicked = false;
}
/// IF THE BURGER MENU IS NOT CLICKED SLIDE DOWN THE BACKGROUND AND FADE IN THE LIST ITEMS
else {
$("#menu").animate({
height: "150px",
}, 1500 );
$("#mobileMenu li").css({
padding: "5px 0px",
color: "white"
});
$("#mobileMenu li").fadeIn(3500 );
isclicked = true;
/// IF USER RESIZES THE PAGE REMOVE THE MENU
$( window ).resize(function() {
$("#mobileMenu li").css({
display: "none",
});
$("#menu").css({
height: "80px",
});
// SET BURGER STATE TO NOT ACTIVATED
$(".burger").removeClass('active');
});
}});
您还需要在resize事件处理程序中将isclicked设置为false:
/// IF USER RESIZES THE PAGE REMOVE THE MENU
$( window ).resize(function() {
$("#mobileMenu li").css({
display: "none",
});
$("#menu").css({
height: "80px",
});
// SET BURGER STATE TO NOT ACTIVATED
$(".burger").removeClass('active');
isclicked = false;
});
}});