Question

以下是我的网站：http://stage.samkeddy.com/

它使用几个媒体查询和由javascript支持的移动菜单按钮进行响应。

以下是菜单按钮的javascript：

function toggleMenu () {
    if (menuIsVisible == false) {
        collapsibleMenu.style.height = 'auto';
        content.style.paddingTop = '290px';
        menuIsVisible = true;
    }
    else {
        collapsibleMenu.style.height = '0';
        content.style.paddingTop = '80px';
        menuIsVisible = false;
    }
}

所以你可以看到我需要调整内容div顶部的填充，以便偏移菜单

但是如果调整大小到手机大小，打开菜单，然后调整回大小，桌面大小，媒体查询不修复填充，因为还有来自javascript的内联样式。我尝试在桌面版本上进行填充！很重要，但是调整大小后填充仍然没有变化，即使根据this！重要节拍内联。

您可以通过打开尺寸（它应该看起来如何），调整到移动宽度（导航将消失，您将看到菜单按钮），单击菜单按钮（保持菜单打开）来测试自己，然后将网站的大小调整为桌面宽度。你会看到填充物仍在那里。如果您检查它，您可以看到原始填充被划掉，以支持内联样式。

我知道通过使用javascript监控宽度并设置填充可以实现这一点，但我真的不想这样做，而且我认为不应该这样做。

编辑：已解决

首先，我应该添加类，而不是使用我的javascript添加CSS。

然后我认为在媒体查询之外放置！重要只会让它显示在桌面上，但它接管了所有媒体查询。因此，将它放在查询中使其工作。请注意，如果我使用2个单独的菜单（移动/桌面），我不需要这个，但由于它已修复且#content需要填充，因此必须完成。但是使用这种技术，您也可以只使用一个菜单，但这样做菜单的高度。我已经在codepen中展示了这项技术：http://codepen.io/anon/pen/JFvay

Answer 1

将此代码添加到样式表应该可以解决问题，我只是在您的网站上使用开发人员工具进行了尝试，并且它正在运行：

@media only screen and (min-width: 643.2px) {
    #content {
        padding-top: 80px !important;
    }
}

虽然我强烈建议您为移动设备创建单独的导航菜单，然后使用@ media-queries显示它。

Answer 2

您的问题在于您将CSS和内嵌样式混合在一起。作为一般规则，请避免使用element.style.<property> =或jQuery的.css()功能直接在元素上放置特定的CSS属性，无论是HTML格式。相反，您应该使用类来定义所需的属性作为CSS规则：

#collapsible-menu                       { height: auto;  }
#content                                { padding-top: 290px; }
#someelt.menu-visible #collapsible-menu { height: 0; }
#someelt.menu-visible #content          { padding-top: 80px; }

其中someelt是一些更高级别的祖先元素。然后，你的JS变得简单

function toggleMenu() {
    document.getElementById('someelt').classList.toggle('menu-visible');
}

如果您定位的浏览器不支持classList（请参阅CanIUse），则jQuery会提供自己的类切换版本。

CSS不是命令式语言，但如果您愿意，您可以将上面最后两条规则的#someelt.menu-visible部分视为一种if语句：＆＃34; 如果菜单可见，那么然后将collapsible-menu缩小到零高度＆＃34;等等。在CSS作为一种编程语言（它是）的这个比喻中，我认为menu-visible类#someelt的存在可以被认为是一种布尔变量＆＃34;。最有可能的是，您不再需要JS中的相应变量。

无论如何，这样做的好处是，只要查看CSS文件，查看代码的人就可以看到所有与CSS相关的逻辑，而不必同时查看CSS和JS，并且您可以在一个地方更改与CSS相关的内容。

CSS特异性优先于！重要

2 个答案: