如何在刷新時修復click eventlistener需要雙擊才能工作

Question

我正在使用僅使用html css和vanilla javascript的navbar項目。 一切都很好，它做我需要它做的事情。 問題是，當您單擊“下載”菜單選項時首次加載或刷新頁面時，單擊一下就無法工作。 為了使它工作，我必須雙擊按鈕。 雙擊后，只需單擊一下即可完成。

我試圖研究這個問題並嘗試過一些諸如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事件偵聽器的回調函數內部，您正在檢查顯示屬性為“none”。

不幸的是，最初並非沒有 ，它只是空洞 。 你可以解決這個問題：

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

Answer 2

您正在測試元素的style屬性。 當您這樣做時，您正在測試任何“內聯”樣式（使用style屬性或style屬性設置的style ）。 如果您的初始HTML在任何元素上沒有任何style屬性，那么您的測試將失敗並轉到測試的else部分，然后設置style 。 在初始失敗之后，然后設置style ，以便后續測試起作用。

相反，您可以測試“計算樣式” （處理完所有CSS后的樣式，無論樣式設置在何處（內聯，內部樣式表，外部樣式表）。

 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.您可以用<div class="dropdown1" style="display: none;">替換HTML中的下拉列表1代碼。 或者添加到js的東西來檢查顯示是否為上述兩者，或者在第一次運行時都不是。