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

Question

我有一个只在 CSS 媒体查询中显示的交互式元素，它将另一个元素(nav 元素)的显示从无切换为阻止。在媒体查询之外(任何显示宽度大于 580 像素)导航元素显示设置为 block 。当我在媒体查询中切换显示并将导航设置为不显示，然后将浏览器的大小重新调整为大于 580 像素的宽度时，导航元素仍设置为不显示。我怎样才能使在媒体查询中切换导航的显示不会影响它在媒体查询之外的显示？

<!-- 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 使用此切换功能，您可以向窗口添加一个监听器以检测屏幕宽度的变化。因此，如果窗口的大小超过 580 像素(或您想要的任何大小)，它可以检查并确保清除任何内联 css。