媒体查询的Javascript覆盖

Question

我正在创建一个响应式网站。 我设置了一个媒体查询，以便当屏幕宽度降到768像素以下时，一个类（可以称其为“ hiddenClass”）被隐藏。 然后，我实现了Javascript，只需单击一次按钮即可将此类切换为视图。 我遇到的问题是javascript似乎覆盖了媒体查询。 因此，如果将屏幕缩小到768px以下，“ hiddenClass”消失了。...然后单击显示“ hiddenClass”的按钮.....然后再次单击该按钮以将其再次隐藏在较小的设备上... ..现在我打开窗口，即使它到达768px，“ hiddenClass”仍保持隐藏状态。 如果我取出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();
});
****/

Answer 1

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

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

^{JSFiddle演示}
根据本文的介绍 ，此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演示}

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 = '▼';
        }else{
            menu.style.display = 'block';
            link.innerHTML = '▲';
    }
}

说明：toggleMenu（）函数控制菜单的显示/隐藏，并且在将窗口的尺寸从<1024px（下拉样式菜单）调整为> 1024px之后，问题本身出现了，我的常规“桌面”菜单完全消失了。 假设JavaScript插入了内联样式（即作为元素属性），然后以1024或更高的调整大小插入了该内联样式。

问题已解决。