javascript - Javascript 更改元素 CSS 后媒体查询无法正常工作

知道为什么在下面的示例中，媒体查询在 被 js 更改后停止更改菜单栏 的高度吗？ (使窗口变小并单击箭头以展开迷你菜单)。我是否需要为菜单元素或其他东西注册一个原点？

CSS:

#menu {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 90px;
    z-index: 11000;
    opacity: 1;
    background-color: #F03600;
    }

JS:

if ($("#arrowup").css('top') == '0px') {
    $("#menu").animate({'height':'270px'}, 800, "easeInOutQuint");
    } else {
    $("#menu").animate({'height':'55px'}, 800, "easeInOutQuint");
    }

你可以在这里查看页面，所有代码都在一个页面上:

http://www.nioute.co.uk/stuff/

另外，关于媒体查询/js 交互有什么好的读物？

谢谢!

最佳答案

媒体查询不起作用的原因是因为当您使用 Javascript 修改栏时，它会应用 inline-css。这会覆盖您在样式表中可能拥有的 CSS。问题似乎是，当您将箭头向下切换时，#menu 应用了 height="55px" 的内联样式，这会在更大的尺寸上阻止 90px 的常规样式。

解决方案是使用 $(window).resize(function()...); 之类的东西将窗口大小调整为大于媒体查询断点时清除样式，并根据断点检查窗口的当前宽度。如果返回 true，则调用 $('#menu').attr('style', ''); 并删除内联样式。

关于javascript - Javascript 更改元素 CSS 后媒体查询无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17623003/