外部样式未被javascript检测到（如果使用条件）

-1

我对网络开发相对陌生，所以在开发项目网站响应式设计时遇到了一个问题，即使在汉堡菜单被按下时，即使外部线路存在于外部CSS文件，但它没有被检测到，但新的内部样式是由JavaScript创建，然后按预期工作。 HTML：外部样式未被javascript检测到（如果使用条件）

<nav class="mobileNav" id="mobileMenu"> 
    <a class="mol-6" onclick="show();" href="index.html"> 
     <figure> 
      <img class="icon" src="images/nav/home.png" alt=""> 
      <figcaption>Home</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="astronomy.html"> 
     <figure> 
      <img class="icon" src="images/nav/astro.png" alt=""> 
      <figcaption>Astronomy</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="telescope.html"> 
     <figure> 
      <img class="icon" src="images/nav/tele.png" alt=""> 
      <figcaption>Telescopes</figcaption> 
     </figure> 
    </a> 
    <a class="mol-6" onclick="show();" href="about.html"> 
     <figure> 
      <img class="icon" src="images/nav/about.png" alt=""> 
      <figcaption>About</figcaption> 
     </figure> 
    </a> 
</nav>

CSS：

#mobileMenu { 
font-family: light, sans-serif; 
max-height: 0px; 
z-index: 99; 
transform: translateY(-100%); 
overflow: hidden; 
padding: 0px; 
transition: transform 0.5s; 
}

的Javascript：

function show() { 
if (document.getElementById("mobileMenu").style.maxHeight == "0px") { 
    setTimeout(function(){ 
     document.getElementById("mobileMenu").style.maxHeight = "100%"; 
     document.getElementById("mobileMenu").style.position = "fixed"; 
     document.getElementById("mobileMenu").style.padding = "1%"; 
    }, 1) 
    document.getElementById("mobileMenu").style.transform = "translateY(0px)"; 
} else { 
    setTimeout(function(){ 
     document.getElementById("mobileMenu").style.maxHeight = "0px"; 
     document.getElementById("mobileMenu").style.padding = "0px"; 
     document.getElementById("mobileMenu").style.position = "relative"; 
    }, 500) 
    document.getElementById("mobileMenu").style.transform = "translateY(-100%)"; 
}}

工作实例： Astromuneeb (Require Portrait Orientation)

任何帮助将不胜感激。

来源

2017-06-19 UbadahJ

有什么更好的方法，你正在努力完成什么。例如，你可以使用CSS类来进行样式设置，并且只能使用JavaScript来切换类。

来源

2017-06-19 21:55:06

谢谢你的建议，将使用此更新的代码。谢谢。 – UbadahJ

我同意尤金，但.mobileNav类似乎是压倒你的肖像媒体查询。

我说重要的是你的.mobileNav肖像媒体查询，但即使这样，也不会覆盖它，猜测它是与层次。奇怪的是，当您打开和关闭当前版本的display:none;作为导航栏上的内嵌样式时，这无济于事。

绝对只是设置一个.open类作为Eugene建议。并使用CSS转换来做动画。只需在nav上添加/删除类即可。

而且在使用CSS媒体查询时，移动等概率最好使用屏幕大小等，并开始移动第一...

.mobileNav { display: block; } 

@media (min-width: 992px) { 
    .mobileNav { display: none; } 

}

来源

2017-06-19 22:05:05 joshmoto

javascript用于检测菜单的当前状态是其最大高度不是显示，所以我不认为它会影响它。 – UbadahJ

酷人很高兴你对它进行了排序:-)也许我在编辑它时会查看它，因为当我点击打开/关闭时，'＃mobileMenu'元素上有一个内联样式'display：none'。 – joshmoto

感谢您的帮助，它确实帮助我更好地组织了代码，并且错误地放置了代码，因此非常感谢您指出它。 – UbadahJ

外部样式未被javascript检测到（如果使用条件）

回答

相关问题