媒体查询的 Javascript 覆盖答案

【问题标题】：Javascript override of media query媒体查询的 Javascript 覆盖
【发布时间】：2016-08-07 23:28:40
【问题描述】：

我正在创建一个响应式网站。我设置了一个媒体查询，以便当屏幕宽度低于 768 像素时，一个类（我们称之为“hiddenClass”）被隐藏。然后我实现 Javascript 以在单击按钮时将此类切换到视图中。我遇到的问题是 javascript 似乎覆盖了媒体查询。因此，如果我将屏幕缩小到 768px 以下，“hiddenClass”就会消失......然后我单击显示“hiddenClass”的按钮......然后再次单击该按钮以再次将其隐藏在较小的设备上...... ..现在我展开窗口，“hiddenClass”即使在达到 768px 后也保持隐藏状态。如果我取出 javascript 并缩小窗口，“hiddenClass”会像它应该的那样执行......这告诉我 javascript 正在覆盖它。

是否有针对此问题的 CSS 修复？我知道我总是可以在 javascript 中检查窗口调整大小事件以在达到 768px 后显示 hiddenClass。只是想知道这是否可以用 CSS 处理......或者是否可以使用 javascript 来解决它。

用注释掉的 JS 更新 JSfiddle，这样您就可以看到它应该如何工作......然后添加 JS 以查看上述问题。当您缩小屏幕时，按钮是“菜单”导航元素，“hiddenClass”将是 li 中的“菜单”类：

http://jsfiddle.net/or5vy17L/1/

HTML：

<ul>
        <li class="menuButton">- Menu -</li>
        <a href="index.html">
            <li class="menu" >
                Home
            </li>
        </a>
        <a href="instagram.html">
            <li class="menu" >
                Instagram
            </li>
        </a>    
        <li class="menu">Clients</li>
        <li class="menu">Nutrition</li>
        <li class="menu">About Me</li>
        <li class="menu">Contact</li>
    </ul>

css：

li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}

ul {
    text-align:center;
}

.menuButton {
    display:none;
}


@media (max-width:768px) {
    ul {
        padding:0px;
    }

    li {
        display:list-item;
        border:1px solid white;
        padding:.2em .2em .2em .2em;
        border-radius:0px;
    }

    .menu {
        display:none;
    }

     .menuButton {
        display:list-item;
     }
}

javascript：

/****
$('ul').on('click', '.menuButton', function() {
    $('.menu').slideToggle();
});
****/

【问题讨论】：

贴出你的相关编码，demo总是不错的
你能发布你的代码吗？如果没有它，它能否为您提供很多帮助是值得怀疑的。 如果你想变得超级棒，就把它放在一个 jsfiddle 中。
人们只能在没有看到您的实际代码的情况下进行猜测。您的描述根本不够详细，无法知道您在做什么。你的代码（JS、CSS、HTML）可以让人们不用猜测就能给你一个准确的答案。
对不起，伙计们...代码发布在上面，这是小提琴链接。 jsfiddle.net/or5vy17L/1

标签： javascript css overriding media

【解决方案1】：

.hiddenclass 保持隐藏状态，因为它是一种内联样式，并且内联样式几乎覆盖了所有其他样式。您有两种选择，一种是使用 CSS 覆盖内联样式，如 this CSS Tricks post 中所述：

<div style="background: red;">
    The inline styles for this div should make it red.
</div>
div[style] {
   background: yellow !important;
}

^{JSFiddle Demo}
According to this article，此 CSS 解决方案适用于：

Internet Explorer 8.0
Mozilla Firefox 2 和 3
歌剧 9
Apple Safari 和
谷歌浏览器

或者，在调整屏幕大小时使用JS或JQuery去除内联样式：

$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});

^{JSFiddle Demo}

【讨论】：

这是有道理的……所以 javascript 可以内联输入样式。感谢雅各布的帮助。
是的，JS 可以内联输入任何样式，很高兴我能帮上忙！
所以我猜 !important 也推翻了 javascript 幻灯片切换。所以最好的选择是与我之前所做的一样...... window.resize 事件修复。

【解决方案2】：

我自己似乎遇到了这个问题，并按照这里的建议，我想出了这个解决方案：

window.onresize = function() {
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0];

    if(window.innerWidth >= 1024) menu.style.display = '';
};

function toggleMenu() {
    var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
    var link = document.getElementById('nav').getElementsByTagName('a')[0];

    if(menu.style.display == 'block') {
           menu.style.display = 'none';
           link.innerHTML = '&#9660;';
        }else{
            menu.style.display = 'block';
            link.innerHTML = '&#9650;';
    }
}

说明： toggleMenu() 函数控制菜单的显示/隐藏，在将窗口大小从 1024px 后，问题出现了，我的正常“桌面”菜单完全消失了。鉴于 JavaScript 会内联插入样式（即作为元素属性），然后在调整大小为 1024 或更高时，这种内联样式应该消失了。

问题已解决。

【讨论】：