JS eventListener点击问题

Question

我的项目 header 只是需要一些帮助。我决定包含所有 header 文件，这样您就可以运行将其放在代码段中并自行检查发生了什么。我唯一遇到问题的是我的 JS 文件。如果您运行该文件，您会在顶部看到一个菜单栏和一个购物车，我将它们设计为不会同时打开，因此有 if else 语句。现在的问题是网页加载后，无论点击多少次都无法立即打开菜单栏。但是，如果我尝试单击购物车，则需要单击两次才能使其下降并起作用。但奇怪的是，在购物车放下后，菜单栏现在可以工作了。发生这种情况后，一切都按照预期的方式工作。请提供一点帮助，我目前被困在这个问题上。谢谢！

var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');


showShoppingBtn.addEventListener('click', ()=>{

    if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
        showShopping.style.display = 'block';
    } 
    else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
        showMenu.style.display = 'none';
        showShopping.style.display = 'block';
    }
    else {
        showShopping.style.display = 'none';
    }
});

var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');

menuBtn.addEventListener('click', ()=>{

    if(showMenu.style.display == 'none'  && showShopping.style.display == 'none'){
        showMenu.style.display = 'block';
    } else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
        showShopping.style.display = 'none';
        showMenu.style.display = 'block';
    } else {
        showMenu.style.display = 'none';
    }
});

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");

body {
    font-family: "Montserrat", sans-serif;
    margin:0;
    padding: 0;
}
.top-content{
    background: orange;
    display: flex;
}
.shopping-menu{
    width: 100%;
}
#shopping-cart{
   font-size: 2.5em;
   cursor: pointer;
   padding-right: 0;
   float: right;
   margin-right: 1em;
}
.top ul{
    margin-top: 3em;
    list-style: none;
    margin-right: 1em;
}
.top li{
    padding-right: 1.2em;
    margin-bottom: .5em;
    text-align: right;
    text-transform: uppercase;
}
.top-content-container{
    width: 100%;
}
.top-dropdown{
    display: none;
}
.site-logo img{
    position: absolute;
    width: 100vw;
    display: none;
}
.bottom{
    background-color:#0e1338;
    color: white;
    display: flex;
    position: relative;
}
.menu{
    padding-right: 1em;
    width: 100%;
}
.menu-button{
    float: right;
    cursor: pointer;
    padding-right: 1em;
}
.bottom-content-container{
    margin-left: auto;
    margin-right: 0;
    text-align: right;
    padding-right: 1em;
}
.bottom-content-container ul{
    list-style: none;
}
.menu-bar{
    width: 3em;
    height: .5em;
    background-color: white;
    margin: .5em 0;
}
.bottom-dropdown{
    display: none;
    margin-top: 4em;
    text-align: right;
}
.bottom-dropdown li{
    margin: .7em 0;
    text-transform: uppercase;
}
.top li a{
    color: black;
    text-decoration: none;
}
.bottom li a{
    text-decoration: none;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles/header.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <section class="top">
      <div class="top-content">
        <nav class="shopping-menu">
        <i class="fa fa-shopping-cart" id="shopping-cart"></i>
        <div class="top-content-container">
              <div class="top-dropdown" id="top-dropdown">
              <ul>
                <li><a href="#">Cart</a></li>
                <li><a href="#">Checkout</a></li>
                <li><a href="#">My Purchases</a></li>
              </ul>
            </div>
        </nav>
        </div>
      </div>
    </section>
    <section class="bottom">
      <div class="site-logo">
        <img src="images/AutoNation-logo.png" alt="AutoNation Logo">
      </div>
      <nav class="menu">
        <div class="menu-button" id="menu-button">
          <div class="menu-bar"></div>
          <div class="menu-bar"></div>
          <div class="menu-bar"></div>
        </div>
        <div class="bottom-content-container">
          <ul>
            <div class="bottom-dropdown" id="bottom-dropdown">
              <li><a href="#">Services</a></li>
              <li><a href="#">Special Offers</a></li>
              <li><a href="#">Browse</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Location</a></li>
              <li><a href="#">My Account</a></li>
            </div>
          </ul>
      </nav>
      </div>
    </section>
    <script src="scripts/header.js"></script>
  </body>
</html>

Answer 1

因为第一次进入点击功能时，两个style.display都没有填写。所以条件

showShopping.style.display == 'none' && showMenu.style.display == 'none'

不会被评价

使用您的代码的一个快速解决方案是在 js 部分的末尾初始化 style.display

showShopping.style.display = 'none';
showMenu.style.display = 'none'

Answer 2

当您执行 element.style.someStyle 时，您只能访问元素的内联样式。所以你第一次点击 showShoppingBtn 它会传入最后一个 else -> 将它的内联样式设置为 display: none.
一个快速解决方法是直接在 html 中添加内联样式。像这样:

<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">

和

<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>

Answer 3

您的HTML无效
你真的应该切换 class。添加 class 隐藏到菜单并具有 .hide {display:none}

那你可以做

showShoppingBtn.addEventListener('click', () => { 
  showMenu.classList.add("hide")
  showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
  showShopping.classList.add("hide")
  showMenu.classList.toggle("hide")
});

JS eventListener点击问题

JS eventListener clicking problems

javascript

html

onclicklistener

event-listener