使我的页面响应时出现问题。
碰巧通过减小屏幕尺寸,我的正常菜单消失了,因此出现了一个较小的菜单,就像带有隐藏和显示我的部分的按钮的设备一样。
问题是当我按下按钮并隐藏菜单时,如果我再次放大分辨率,正常菜单会重新出现,但按钮隐藏。
这是指向我的页面的链接,其中包含以下代码:
$(document).ready(main);
var contador = 1;
function main() {
$("header nav").hide(); //Ocultamos el Menu
$(".menu_bar").click(function() { //Funcion del Click
$("header nav").slideToggle("slow"); //Mostramos/Ocultamos el Menu al hacer click en el Boton
}); //Terminamos la Funcion del Click
$(".menu_bar").click(function() {
if (contador == 1) {
$('nav').animate({
left: "0"
});
contador = 0;
} else {
contador = 1;
$("nav").animate({
left: "-100%"
});
}
});
}
$(window).resize(function() {
if (window.matchMedia("(min-width: 400px)").matches) {
$("header nav").addClass("show"); //Mostramos el menu
// si estas utilizando hide(), quizá deberías usar show(),
}
});
稍微看一下您的完整代码(包括 css),当您首先隐藏时,就会出现第一个问题。这不是必需的,因为它
header nav
已经在 CSS 和媒体查询中不可见:设置display: none;
(当屏幕小于 700 像素时,请查看 styles.css 行 620)。另一方面,通过放置 2 个单独的点击处理程序,样式会被踩到。如果您要修改相同的元素,这被认为是一种不好的做法。style="left: -100%";
第二个问题是向左关闭菜单的动画离开样式属性如下:看到:是的,所以我们需要在切换到宽版本时重置这个属性。我使用事件做到了这resize
一点removeAttr
如果您替换
main.js
为以下内容,则一切都应按预期工作。只需使用对象的属性
window
来确定您的行为,通常宽度就足够了,但您也可以考虑高度。