4

知道为什么在下面的示例中，媒体查询在被 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 交互有什么好的读物？

谢谢！

4

2 回答 2

9

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

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

于 2013-07-12T19:58:54.247 回答
1

您可以使用 class 为元素添加一些样式并在作业后将其删除，而不是getElementById(#menu).style.height = ...

例如：

getElementById(#menu).classList.add("newHeight")

或者

getElementById(#menu).classList.remove("newHeight")
于 2019-05-12T20:04:03.720 回答