调整大小后导航消失 [英] Nav disappears after resize

问题描述

有问题的站点: http://www.mtthwbsh.com

我正在为该站点构建可折叠的导航栏，并注意到在它折叠后，如果您展开并缩回它并再次放大窗口，导航栏就会消失.我试图更改显示以阻止媒体查询，但我认为jQuery覆盖了它.知道是什么原因造成的吗?

I'm building a collapsable nav for this site and have noticed that after it collapses, if you expand and retract it and enlarge the window again the nav disappears. I tried changing the display to block at my media queries but I think the jQuery is overriding it. Any idea what's causing this?

此外，我希望单击箭头时可以将箭头旋转180度，我该如何定位?我的jQuery如下:

Also, I'd like the arrow to rotate 180 degrees when clicked, how would I target this? My jQuery is as follows:

/* toggle nav */
$("#menu-icon").on("click", function(){
$(".nav").slideToggle();
$(this).toggleClass("active");
});

推荐答案

$(".nav").slideToggle();似乎使导航栏处于display:none;状态.当您尝试在媒体查询中设置display:block;时，是否使用了!important?

$(".nav").slideToggle(); appears to be leaving the nav in a display:none; state. When you set tried to set the display:block; in your media query did you use !important?

修改

如果需要切换小于570px的屏幕尺寸，则需要确保在570px以上的任何尺寸下都可以在CSS中将其设置为display:block;

If your screen size less than 570px needs to be toggled, then you need to make sure that at any size above 570px it will be set in CSS to display:block;

@media (min-width:571px) {
    .nav { display:block!important; }
}

这应该充分覆盖显示属性.

This should adequately override the display property.

这篇关于调整大小后导航消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！