Javascript 覆盖媒体查询

Question

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

有CSS解决这个问题吗？我知道我总是可以在 javascript 中检查 window 调整大小事件，以在 hiddenClass 达到 768px 后显示它。只是想知道这是否可以用 CSS 处理......或者 javascript 是否是修复它的方法。

更新 JSfiddle 并注释掉 JS，这样您就可以看到它应该如何工作...然后添加 JS 以查看上述问题。当您缩小屏幕时，该按钮是 'menu' 导航元素，而 "hiddenClass" 将是 li 中的 "menu" class:

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();
});
****/

Answer 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 浏览器 8.0
Mozilla Firefox 2 和 3
歌剧 9
Apple Safari，以及
Google Chrome

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

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

^{JSFiddle Demo}

Answer 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() 函数控制菜单的 display/hiding，在将 window 从 < 1024px（下拉式菜单）调整到 > 1024px 后，问题出现了，我的正常 "desktop"菜单完全消失。鉴于 JavaScript 插入内联样式（即作为元素属性，）然后在调整大小为 1024 或更高时，此内联样式应该消失。

问题已解决。

Javascript 覆盖媒体查询

Javascript override of media query

javascript

css

media

overriding