Question

当我缩小屏幕尺寸时，我的标题中有一个错误。导航应该消失（只有在点击移动导航图标时重新出现）才能正常工作。但是，如果我单击移动导航图标，然后再次单击它以隐藏它，即使我再次展开屏幕尺寸，导航也会保持隐藏状态。

当屏幕达到670px时，我希望导航再次显示。

CSS

@media screen and (min-width: 671px) {
.nav {
    display: block;
    }   
}

@media screen and (max-width: 670px) {
.navicon {
    display: block;   
}
.homeiconcontainers {
    float: none;
    width: 100%;
}
.header {
    background: none;
    opacity: 1;
}
.pagelinkcontainers {
    float: none;
    line-height: 50px;
    background-color: black;
    width: 200px;
    padding-right: 0px;
    text-align: center;
}
ul {
    padding-left: 20px; 
}
.nav {
    display: none;
}   
}

的JavaScript

// Show Mobile Navbar Onclick

function MobileMenu (object) {

var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;

//Show nav element
for(var nav in elements) {

    if(object!==nav) {

        document.getElementById(nav).style.display='none';
    }
    if(object==nav && mobiledisplay=='block') {

        document.getElementById(nav).style.display='none';   
    }
    else {

        document.getElementById(nav).style.display='block';
        location.hash=pages[nav].title;
        document.title=pages[nav].title;
    }
}
}

我的.nav以某种方式从我的670px媒体查询或javascript函数中获取display: none。我也可能误用了min-width媒体查询，但我不确定。

我假设您不需要查看我的HTML来解决这个问题，但如果您愿意，请告诉我。

Answer 1

现在CSS优先于JavaScript内联样式，强制导航栏可见。

@media screen and (min-width: 671px) {
.nav {
    display: block !important;
}

为什么呢？ JavaScript代码设置内联样式从CSS样式中获胜。或者更好地表示除了CSS规则具有!important之外，始终优先考虑CSS规则。

使元素出现在最小屏幕尺寸上

1 个答案: