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

【问题标题】：Javascript toggle style display inside CSS media query breaks outside media query displayCSS媒体查询中的Javascript切换样式显示在媒体查询显示之外中断
【发布时间】：2015-06-22 01:44:31
【问题描述】：

我有一个仅在 CSS 媒体查询中显示的交互式元素，它将另一个元素（导航元素）的显示从无切换到阻塞。在媒体查询之外（任何显示宽度大于 580 像素），导航元素显示设置为块。当我在媒体查询中切换显示并将导航设置为不显示时，然后将浏览器的大小重新调整为大于 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>

【问题讨论】：

标签： javascript html css media-queries

【解决方案1】：

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

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

或者，如果您真的想在 Javascript 中使用此切换功能，您可以在窗口中添加一个侦听器以检测屏幕宽度的变化。因此，如果窗口大小超过 580 像素（或您想要的任何大小），它可以检查并确保清除所有内联 css。

【讨论】：