Question

当我调整浏览器窗口大小时导航栏，徽标停留在导航栏下方，所以我想出一个解决方案是当窗口小于500px时用图像替换导航栏，但是jquery不是＆＃39;工作。

有人可以看一下吗？并告诉我什么是错的？谢谢！

＆＃13;

function resizeFunction() {
    if($(window).width() > 500) {   
        if(!$('.head').hasClass('greater'))
        {
			$('#menu').show();
        }
	}
    else {
        if(!$('.head').hasClass('less'))
        {
			$('#menu').hide();
			$('#navbarButton').addClass('less');
        }
    }
}

＆＃13;

.head是标题，＃menu是导航栏我想用#navbarbutton按钮替换它。在html上#navbarbutton style =＆＃34; display：none＆＃34;。

Answer 1

你能不能在纯CSS中实现这个目标吗？

使用媒体查询将#menu设置为：在小于500px时显示：none和在同一媒体查询中显示的#navbarbutton：

在页面其余部分的CSS中（当超过500px时）将#navbarbutton设置为display：none，并将#menu设置为：block。

这样的事情：

#menu {
    display:none
}

#nanvbarbutton {
    display:block;
}

@media (min-width:500px) {
    #menu {
        display:block
    }

    #nanvbarbutton {
        display:none;
    }
}

请记住，首先为较小的屏幕版本执行CSS通常会更容易。

当窗口宽度小于

1 个答案: