切换按钮需要点击两次

Question

我制作了一个切换按钮以在移动屏幕上显示一些导航链接。但是在第一页加载时需要点击两次。在那之后它切换得很好。我怎样才能使它第一次正常运行？

这是包含函数的脚本。

script.js

function ToggleNavLinks() { /
    var navLink = document.getElementsByClassName("nav-links")[0]; 
    
    if (navLink.style.display === "none") { 
        navLink.style.display = "flex"; 
    } 
    else {
        navLink.style.display = "none"; 
    }
}

这是包含前端元素的布局文件。我已经测试过它是否是外部脚本引用并且它确实有效。

layout.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;
}

Answer 1

这可能不是您Javascript的问题。首先检查您的 CSS 文件。检查您的代码顺序，即显示标签是否已经是 none 或 flex。然后只有它在第一个实例中不起作用。可能是这样的：

 .navlink{
display: none;
}

将其更改为：

 .navlink{
display: flex;
}

Answer 2

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") {

切换按钮需要点击两次

Toggle button takes two clicks

javascript

css

express

handlebars.js