Question

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

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

使用JS更新JSfiddle注释掉，这样你就可以看到它应该如何工作......然后在JS中添加以查看上述问题。按钮是＆＃39;菜单＆＃39;缩小屏幕时的导航元素和＆＃34; hiddenClass＆＃34;将是＆＃34;菜单＆＃34;李的课程：

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 Explorer 8.0
Mozilla Firefox 2和3
Opera 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（）函数控制菜单的显示/隐藏，并且在从＆lt; 1024px（下拉样式菜单）到＆gt; 1024px，我的正常＆＃34;桌面＆＃34;菜单完全消失了。鉴于JavaScript插入样式内联（即作为元素属性），然后在1024或更高的调整大小上，这种内联样式应该消失。

问题已解决。

Javascript覆盖媒体查询

2 个答案: