Question

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

<!-- 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。

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

1 个答案: