我制作了一個切換按鈕以在移動螢屏上顯示一些導航鏈接。但是在第一個頁面加載時，它需要兩次點擊。在那之后，它切換得非常好。我怎樣才能使它第一次正常運行？
這是包含該函式的腳本。
腳本.js
function ToggleNavLinks() { /
var navLink = document.getElementsByClassName("nav-links")[0];
if (navLink.style.display === "none") {
navLink.style.display = "flex";
}
else {
navLink.style.display = "none";
}
}
這是包含前端元素的布局檔案。我已經測驗過它是否是外部腳本參考并且它確實有效。
布局.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<meta charset="utf-8"/> <!-- Charset -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script type="text/javascript" src="/javascripts/script.js"></script>
</head>
<body>
<header>
<nav class="navbar">
<img class="logo" alt="logo" src="images/logo-stock.png">
<a class="nav-toggle" onclick="ToggleNavLinks()" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Links used in the navbar -->
<div class="nav-links">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<div>
{{{body}}}
</div>
</body>
</html>
如果與它有任何關系，我還會包含樣式表。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
:root {
font-size: 16px;
font-family: 'Roboto', sans-serif;
--text-primary: white;
--text-secondary: #4c6bc1;
--bg-primary: #101316;
--bg-secondary: #181a1d;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--bg-primary);
margin: 0;
padding: 0;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #181a1d;
}
body::-webkit-scrollbar-thumb {
background: #4c6bc1;
}
.navbar {
justify-content: space-between;
position: relative;
background-color: var(--bg-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar img {
width: 250px;
height: 100px;
}
.logo{
max-width: 100%;
height: auto;
}
.navbar-links {
height: 100%;
}
.nav-links ul {
margin: 0;
padding: 0;
display: flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
font-size: 1.5rem;
text-decoration: none;
color: white;
padding: 1rem;
display: block;
}
.nav-links li a:hover {
color: #4c6bc1;
}
.nav-toggle {
position: absolute;
top: 1.5rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
height: 21px;
width: 30px;
}
.nav-toggle:hover {
cursor: pointer;
}
.nav-toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
@media (max-width: 800px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links ul {
width: 100%;
flex-direction: column;
}
.nav-links li {
text-align: center;
}
.nav-links.active {
display: flex;
}
uj5u.com熱心網友回復：
element.style.display === 'none'
當元素具有行內style屬性時為真，其中包括display: none. 請注意，無論元素的實際計算樣式屬性如何，這都是正確的。您可以在此示例中檢查它：
顯示代碼片段
console.log(document.querySelector('.test').style.display);.test {
display: block !important;
}
code {
background-color: #eee;
}<div style="display: none;" class="test">I haz <code>style.display === 'none'</code>. You are looking at me. Stop staring, it's not nice.</div>要檢查 的計算屬性display，請使用
window.getComputedStyle(element).display === 'none'
總之，更換
if (navLink.style.display === "none") {
和
if (window.getComputedStyle(navLink).display === "none") {
uj5u.com熱心網友回復：
這可能不是您的 Javascript 的問題。首先檢查您的 CSS 檔案。檢查您的代碼的順序，即顯示標簽是否已經是 none 或 flex。然后只有它在第一個實體中不起作用。可能是這樣的：
.navlink{
display: none;
}
將其更改為：
.navlink{
display: flex;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410718.html
標籤：