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>

Answer 1

在您已附加到 dropDownMain 的click事件监听器的回调函数中，您正在检查display属性是否为“ none”。

不幸的是，起初并不是 none ，而是 empty 。您可以通过以下方法解决此问题：

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

Answer 2

您正在测试元素的style属性。这样做时，您正在测试任何“内联”样式（已使用style属性或style属性设置的样式）。如果您的初始HTML在任何元素上都没有任何style属性，则您的测试将失败并转到测试的else部分，然后在其中设置style。在最初的失败之后，style被置位，因此后续测试有效。

相反，您可以测试"computed style" （处理完所有CSS后的样式，而不管样式在哪里设置（内联，内部样式表，外部样式表）。< / p>

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(){

   // ***********************************************************
   // Get the computed display style
   let computedDisplay = getComputedStyle(dropdown).display;
   // ***********************************************************
   
   // Test for the computed style, not the inline style which hasn't been set yet.
   if(computedDisplay === '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>

Answer 3

因此，此问题是显示标签未直接附加到下拉列表1。您可以将HTML中的下拉列表1代码替换为<div class="dropdown1" style="display: none;">。或向js添加一些内容，以检查显示是否为以上两个都不显示或完全不显示，就像第一次运行时一样。

如何在刷新时修复点击事件监听器，需要双击才能正常工作

3 个答案: