javascript - 如何在刷新时修复单击事件侦听器需要双击才能工作

Question

我正在开发一个仅使用 html css 和 vanilla javascript 的导航栏项目。一切正常，它完成了我需要它做的事情。问题是，当您单击“下载”菜单选项时第一次加载或刷新页面时，单击它不会起作用。为了让它工作，我必须双击该按钮。双击后，单击即可工作。

我试图研究这个问题并尝试了诸如 preventDefault() 之类的行，但没有任何效果，而且我很难找到一些东西。我遇到的一切都是用jquery。

const dropDownMain = document.querySelector('.dropdown');
 const dropdown = document.querySelector('.dropdown1');
 const dropdown2 = document.querySelector('.dropdown2');
 const submenu1 = document.querySelector('.submenu1');
 const dropdown3 = document.querySelector('.dropdown3');
 const submenu2 = document.querySelector('.submenu2');
 const list = document.querySelector('#listAdd');
 
 dropDownMain.addEventListener('click', function(){
   
   if(dropdown.style.display === 'none'){
     dropdown.style.display = 'block';
     dropDownMain.style.backgroundColor = 'black';
    
   }else{
     dropdown.style.display = 'none';
     dropDownMain.style.backgroundColor = '#444444';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
     dropdown3.style.display = 'none';
    submenu2.style.backgroundColor = '#444444';
 
     
   }
 });
 
 
// First Submenu
 submenu1.addEventListener('click', function(){
   if(dropdown2.style.display === 'none' ){
     dropdown2.style.display = 'block';
     dropdown3.style.display = 'none';
     submenu1.style.backgroundColor = 'black';
     submenu2.style.backgroundColor = '#444444';
   }else{
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }
 });

// Second Submenu
 submenu2.addEventListener('click', function(){
   if(dropdown3.style.display === 'none'){
     dropdown3.style.display = 'block';
     submenu2.style.backgroundColor = 'black';
     dropdown2.style.display = 'none';
     submenu1.style.backgroundColor = '#444444';
   }else{
     dropdown3.style.display = 'none';
     submenu2.style.backgroundColor = '#444444';
     submenu1.style.backgroundColor = '#444444';
   }
 });
 
 document.getElementById('searchGlass').addEventListener('click', function(){
   addOnList = document.getElementById('form').value;
   console.log(addOnList);
   let listing = document.createElement('li');
   let anchor = document.createElement('a');
   let att = document.createAttribute('href');
   att.value = '#';
   anchor.setAttributeNode(att);
   listing.appendChild(anchor);
   anchor.appendChild(document.createTextNode(addOnList));
   list.appendChild(listing);
 });

body,html{
  font-family: 'PT Sans', sans-serif;
  background-color: white;
  margin:0;
  color: white;
  line-height:1.6;
}

.container{
  width:1920px;
  margin: 0px;
}

#nav1{
  background-color:#444444;
  background-repeat:no-repeat;
  color:white;
  font-size:14px;
  overflow:hidden;
  height:50px;
  box-shadow: 0px 1px 10px #999;
}

#nav1 ul{
  padding:0;
}

#nav1 li{
  display:inline;
}

#nav1 a {
  text-decoration:none;
  color:white;
  padding:20px;
}

#nav1 li a:active{
  background-color:black;
}

#nav1 li a:hover{
  background-color:black;
}

.fas {
  vertical-align:middle;
}

/*First Menu*/

.dropdown1{
  background-color:#444444;
  width:200px;
  margin-top:0px;
  box-shadow: 0px 0px 10px #999;
  position:absolute;
  margin-left:204px;
  padding-bottom:15px;
  display:none;
}

.dropdown1:before, .dropdown1:after{
  content:'';
  position:absolute;
  display:block;
  bottom:100%;
  width:0;
  height:0;
}

.dropdown1:before{
  left:19px;
  border: 11px solid transparent;
  border-bottom-color:#444444;
}

.dropdown1:after{
  left:20px;
  border: 11px solid transparent;
  border-bottom-color: #444444;
}

.dropdown1 ul{
   padding:20px;
  list-style-type: none;
  
}

.dropdown1 li{
  padding-bottom:5px;
  
  border-bottom: 1px solid grey;
}

.dropdown1 a{
 
  text-decoration:none;
  color:white;
  font-size:12px;
}

.dropdown1 li a:active {
  background-color:black;
}
.dropdown1 li:hover {
  background-color:black !important;
}

.dropdown1 li:first-child {
   background:none !important;
}


.dropdown1 input{
  color:white;
  border:none;
  padding-top:5px;
  height:10px;
  margin-left:20px;
}

.dropdown1 li:nth-child(3) i{
  color:white;
  margin-left:108px;
}

.dropdown1 li:nth-child(5) i{
  color:white;
  margin-left:98px;
}

.inputBar{
  width:120px;
  background-color:#444444;
  border: 1px solid transparent;
  box-shadow:0px 0px 10px #999;
  padding:5px;
}

#searchGlass{
  margin-left:10px;
  padding:3px;
  text-align:center;
  vertical-align:middle;
  box-shadow:0px 0px 10px #999 ;
}

#searchGlass i{
  width:15px;
}


#listAdd{
  margin:0;
}


/*First Sub Menu*/

.dropdown2{
  background-color:#444444;
  width:200px;
  height:270px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:98px;
  display:none;
}

.dropdown2 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown2 li{
  padding-bottom:5px;
  border-bottom: 1px solid grey;
}

.dropdown2 a{
  color:white;
  font-size:12px;
  text-decoration:none;
}


.dropdown2 li:hover{
  background-color:black !important;
}

.dropdown2 li:first-child{
  background:none !important;
}

/*Second SubMenu*/

.dropdown3{
  background-color:#444444;
  width:200px;
  height:240px;
  box-shadow:0px 0px 10px #999;
  position:absolute;
  margin-left:380px;
  margin-top:160px;
  display:none;
  
}

.dropdown3 ul{
  padding:20px;
  list-style-type:none;
}

.dropdown3 li{
  padding-bottom:5px;
  border-bottom:1px solid grey;
}

.dropdown3 a{
  text-decoration:none;
  color:white;
  font-size:12px;
  padding:0;
}

.dropdown3 li:hover{
  background-color:black !important;
}

.dropdown3 li:first-child{
  background:none;
}

<!DOCTYPE html>
<html>
<head>
<title>Drop Down Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


</head>

<body>
  <header class="container">
    <!--Start of Navbar-->
    <!--Main Navbar-->
    <nav id="nav1">
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Foundation</a></li>
        <li><a href="#" class="dropdown">Downloads <i class="fas fa-angle-down"></i></a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
    <!-- End of Main Navbar-->
    <!--Main Menu-->
    <div class="dropdown1">
      <ul id="listAdd">
        <li>Sample Menu</li>
        <li><a href="#">Television</a></li>
        <li class="submenu1"><a href="#" >Movies <i class="fas fa-angle-right"></i> </a></li>
        <li><a href="#">E-Books</a></li>
        <li class="submenu2"><a href="#" >Software <i class="fas fa-angle-right"></i></a></li>
        <li><a href="#">Images</a></li>
      </ul>
      <input placeholder="Input" class="inputBar" id="form"><a href="#" id="searchGlass"><i class="fas fa-search fa-xs"></i></a>
    </div>
    <!--End of Main Menu-->
    <!--First Sub Menu-->
    <div class="dropdown2">
      <ul>
        <li>Top Movies</li>
        <li><a href="#">Friday</a></li>
        <li><a href="#">Avengers</a></li>
        <li><a href="#">Transformers</a></li>
        <li><a href="#">Dark Knight</a></li>
        <li><a href="#">The Notebook </a></li>
      </ul>
    </div>
    <!--End of First Sub Menu-->
    <!--Second Sub Menu-->
    <div class="dropdown3">
      <ul>
        <li>Top Software</li>
        <li><a href="#">Adobe</a></li>
        <li><a href="#">Gimp</a></li>
        <li><a href="#">Microsoft Office</a></li>
        <li><a href="#">Rosetta Stone</a></li>
      </ul>
    </div>
    <!--End of Second Sub Menu-->
  </header>
  <!--End of Navbar-->

<script src="script.js"></script>
</body>

</html>



 

标签： javascript

Answer 1

在您附加到dropDownMain的单击事件侦听器的回调函数中，您正在检查显示属性是否为“无”。

不幸的是，它最初不是none，它只是empty。您可以通过以下方式解决此问题：

if(dropdown.style.display === 'none' || dropdown.style.display === '')