切换按钮需要单击两次答案

【问题标题】：Toggle button takes two clicks切换按钮需要单击两次
【发布时间】：2022-01-13 12:42:10
【问题描述】：

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

这是包含该函数的脚本。

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

【问题讨论】：

当您调用navLink.style.display = "none"; //Else leave display as none 时，您是否确保您的navLink.style.display 在页面加载时实际上是空的？我敢打赌，双击是因为它没有被分配给 flex 因为你的条件是错误的，因为你在 else 语句中明确定义它设置为 none 如果它不是已经......什么是默认值吗？
在样式表中设置为无
这并不意味着navlink.style.display 等于字符串none。检查是否window.getComputedStyle(navlink).display === 'none'。 ref.
那么我应该把它放到脚本的什么地方。

标签： javascript css express handlebars.js

【解决方案1】：

element.style.display === 'none'

当元素具有内联style 属性时为真，其中包括display: none。请注意，不管元素的实际计算样式属性如何都是如此。你可以在这个例子中检查它：

console.log(document.querySelector('.test').style.display);

.test {
  display: block !important;
}
code {
  background-color: #eee;
}

&lt;div style="display: none;" class="test"&gt;I haz &lt;code&gt;style.display === 'none'&lt;/code&gt;. You are looking at me. Stop staring, it's not nice.&lt;/div&gt;

要检查display 的计算属性，请使用

window.getComputedStyle(element).display === 'none'

总之，替换

if (navLink.style.display === "none") {

与

if (window.getComputedStyle(navLink).display === "none") {

【讨论】：

是的，已经解决了，非常感谢。

【解决方案2】：

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

 .navlink{
display: none;
}

改成：

 .navlink{
display: flex;
}

【讨论】：

这确实解决了这个问题，但想法是，在媒体查询触发之前，该元素应该显示：无。