JavaScript導航欄如何修復？

Question

我已經制作了這個javascript導航欄，我使用了一個簡單的CSS使其外觀和正常工作，但是問題是當我將鼠標懸停在按鈕上時我的下拉菜單不起作用，我也不知道為什么。

只有在我對它們兩者都單擊1次后，它才起作用。

所以我想當我將鼠標懸停在其上時自動將塊放下

誰能給我一些建議？

 function showDropdown(idSelector) { document.getElementById(idSelector).classList.toggle("show"); buildDropdown(idSelector); } function buildDropdown(idSelector) { var newLinks = new Array(); var finalHtml = ''; if(idSelector === 'home_page_dropdown_b') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } else if(idSelector === 'home_page_dropdown_f') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } for (i=0; i< newLinks.length; i++) { finalHtml += "<a href='" + newLinks[i].linkUrl + "' target='_blank'>"+ newLinks[i].displayText + "</a>" } console.log(finalHtml); document.getElementById(idSelector).innerHTML = finalHtml; } 

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .buildDropdown: hover { display: block; } 

 <div class="dropdown"> <div onclick="showDropdown('home_page_dropdown_b')" class="dropbtn">Dropdown</div> <div id="home_page_dropdown_b" class="dropdown-content"> <div id="home_page_nav_menu_b"></div> </div> </div> <div class="dropdown"> <div onclick="showDropdown('home_page_dropdown_f')" class="dropbtn">Dropdown</div> <div id="home_page_dropdown_f" class="dropdown-content"> <div id="home_page_nav_menu_f"></div> </div> </div> 

Answer 1

看起來您需要做的就是將HTML中的onclick偵聽器更改為onmouseover ：

 function showDropdown(idSelector) { document.getElementById(idSelector).classList.toggle("show"); buildDropdown(idSelector); } function buildDropdown(idSelector) { var newLinks = new Array(); var finalHtml = ''; if(idSelector === 'home_page_dropdown_b') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } else if(idSelector === 'home_page_dropdown_f') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } for (i=0; i< newLinks.length; i++) { finalHtml += "<a href='" + newLinks[i].linkUrl + "' target='_blank'>"+ newLinks[i].displayText + "</a>" } console.log(finalHtml); document.getElementById(idSelector).innerHTML = finalHtml; } 

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .buildDropdown: hover { display: block; } 

 <div class="dropdown"> <div onmouseover="showDropdown('home_page_dropdown_b')" class="dropbtn">Dropdown</div> <div id="home_page_dropdown_b" class="dropdown-content"> <div id="home_page_nav_menu_b"></div> </div> </div> <div class="dropdown"> <div onmouseover="showDropdown('home_page_dropdown_f')" class="dropbtn">Dropdown</div> <div id="home_page_dropdown_f" class="dropdown-content"> <div id="home_page_nav_menu_f"></div> </div> </div> 

Answer 2

還有花葯的解決方案

 var dropbtn = document.getElementsByClassName("dropbtn"); var dropdowns = document.getElementsByClassName("dropdown"); for (var k = 0; k < dropbtn.length; k++) { var doc = dropdowns[k]; var notes = null; for (var v = 0; v < doc.childNodes.length; v++) { if (doc.childNodes[v].className == "dropdown-content") { elid = doc.childNodes[v].id; break; } } dropbtn[k].addEventListener('click', showDropdown(elid), false); dropbtn[k].addEventListener('mouseover', showDropdown(elid), false); } function showDropdown(idSelector) { document.getElementById(idSelector).classList.toggle("show"); buildDropdown(idSelector); } function buildDropdown(idSelector) { var newLinks = new Array(); var finalHtml = ''; if(idSelector === 'home_page_dropdown_b') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } else if(idSelector === 'home_page_dropdown_f') { newLinks = [ {displayText:"Camasi", linkUrl: "#"}, {displayText:"Pantaloni", linkUrl: "#"}, {displayText:"Bluze", linkUrl: "#"}, {displayText:"Blugi", linkUrl: "#"}, {displayText:"Tricouri", linkUrl: "#"} ]; } for (i=0; i< newLinks.length; i++) { finalHtml += "<a href='" + newLinks[i].linkUrl + "' target='_blank'>"+ newLinks[i].displayText + "</a>" } console.log(finalHtml); document.getElementById(idSelector).innerHTML = finalHtml; } 

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropbtn:hover, .dropbtn:focus { background-color: #3e8e41; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .buildDropdown: hover { display: block; } 

 <div class="dropdown"> <div class="dropbtn">Dropdown</div> <div id="home_page_dropdown_b" class="dropdown-content"> <div id="home_page_nav_menu_b"></div> </div> </div> <div class="dropdown"> <div class="dropbtn">Dropdown</div> <div id="home_page_dropdown_f" class="dropdown-content"> <div id="home_page_nav_menu_f"></div> </div> </div>