CSS媒体查询中的Javascript切换样式显示在媒体查询显示之外中断

Question

我有一个仅在CSS媒体查询中显示的交互式元素，该元素将另一个元素（nav元素）的显示从无显示切换为阻止。 在媒体查询之外（任何大于580px的显示宽度），导航元素显示均设置为块。 当我在媒体查询中切换显示并将导航设置为不显示时，然后将浏览器的大小重新调整为大于580px的宽度时，导航元素仍设置为不显示。 我如何才能在媒体查询中切换nav的显示不会对其在媒体查询之外的显示产生影响？

 <!-- Toggle Display // click on the element function toggle(e, id) { var el = document.getElementById(id); el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none'; // save it for hiding toggle.el = el; // stop the event here if (e.stopPropagation) e.stopPropagation(); e.cancelBubble = true; return false; } // click outside the element document.onclick = function() { if (toggle.el) { toggle.el.style.display = 'none'; } } //--> 

 nav { color: white ; float: right ; margin: 0 10px 0 0 ; display: block ; } nav a { margin-right: 25px ; padding: 5px 4px 2px 4px ; display: inline-block ; } .nav-text { display: none ; /* replaced by icons */ font-size: 18px ; } @media all and (max-width: 580px) { nav { display: none ; float: left ; width: 100% ; margin: 3px 0 0 0 ; clear: both ; } .menu { display: block ; } nav a { display: block ; background: gray ; color: white ; padding: 10px 20px ; width: 100% ; border-bottom: 1px solid #ccc ; } } 

 <header> <div onclick="toggle(event, 'nav')" class="menu" tabindex=0> <!-- Menu icon --> </div> <nav id="nav"> <a href="/"><span class="nav-text">Home</span></a> <a href="#"><span class="nav-text">About</span></a> </nav> </header> 

Answer 1

当您使用Javascript代码设置display:none时，它将被设置为内联样式，它将覆盖CSS文件，媒体查询或其他内容。

最简单的方法是在媒体查询中添加!important到display:block ，但这有点草率。

另外，如果您确实希望将此切换功能与Javascript一起使用，则可以向窗口添加侦听器以检测屏幕宽度的变化。 因此，如果窗口的大小大于580px（或您想要的任何大小），它可以检查并确保清除所有内联CSS。