Question

这是我第一次建立一个网站，而且我发现自己陷入了一些可能只是对某些基本的HTML标记原则的误解，所以请放轻松。

我有一个固定的CSS菜单，位于屏幕顶部，如下所示：

<div class="banner-contain" id="myTopNav">
    <div class="cssmenu w3-container">
        <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"> .  </i></span></div>
    </div>
</div>

CSS：

 .cssmenu {
    background:rgba(255,255,255,0.94);
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
    -webkit-box-shadow: 0 4px 3px -3px #999;
    -moz-box-shadow: 0 4px 3px -3px #999;
    box-shadow: 0 4px 3px -3px #999;
}

我可以使用以下JS成功隐藏它：

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
    document.getElementById("myTopNav").style.display = "none";
    document.getElementById("hide-pad").style.display = "none";
}

function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
    document.getElementById("myOverlay").style.display = "none";
    document.getElementById("myTopNav").style.display = "block";
    document.getElementById("hide-pad").style.display = "block";
}

隐藏垫只是切换删除我用来将页面内容保持在菜单下方的填充。

现在的实际问题;我想修改我的CSS菜单看起来更像这样，但该功能不再按预期工作（即不隐藏ID myTopNav的完整内容）：

<div class="banner-contain" id="myTopNav">    
    <div class="cssmenu w3-container">
        <div class="w3-row">
          <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span></div>
          <div class="w3-col s4 w3-center"><h3 class="w3-wide logo"><b>HELP</b></h3></div>
          <div class="w3-col s4 w3-center"><p>s4</p></div>
        </div>
    </div>
</div>

提前感谢您的建议，以及之前作为潜伏者提出的所有建议-sgn

Answer 1

从当前div中删除onClick函数并将其提供给父div。

所以你的代码现在看起来像这样。

<div class="banner-contain" id="myTopNav" onclick="w3_open()">    
    <div class="cssmenu w3-container">
       <div class="w3-row">
          <div class="w3-col s4 w3-left"><span class="w3-opennav w3-hide-large w3-xxlarge w3-hover-text-grey"><i class="fa fa-bars"></i></span></div>
          <div class="w3-col s4 w3-center"><h3 class="w3-wide logo"><b>HELP</b></h3></div>
          <div class="w3-col s4 w3-center"><p>s4</p></div>
        </div>
    </div>
</div>

希望它有效!!

Answer 2

感谢所有人的回复，事实证明我犯了一个菜鸟错误并且让自己与css视口（？）设置混淆，我需要@media (min-width:993px)banner-contain{display:none!important}才能隐藏横幅，然后它可以切换到顶部或左侧查看 - 这解决了我的问题，但我真的没有问正确的问题，对不起。

使用Javascript隐藏固定的CSS菜单

2 个答案: