当窗口宽度小于某个值时替换一个元素

Question

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

有人可以看看吗？告诉我怎么了？ 谢谢！

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

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

Answer 1

你不能用纯 CSS 实现吗？

使用媒体查询将#menu 设置为在小于 500 像素时显示：无，并将 #navbar 按钮设置为在同一媒体查询中显示：块。

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

类似这样的：

#menu {
    display:none
}

#nanvbarbutton {
    display:block;
}

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

    #nanvbarbutton {
        display:none;
    }
}

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