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 = ''; 
 
\t if(idSelector === 'home_page_dropdown_b') 
 
    { 
 
    \t newLinks = [ 
 
    \t {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
    } 
 
    else if(idSelector === 'home_page_dropdown_f') 
 
    { 
 
    \t newLinks = [ 
 
    {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
\t } 
 
    
 
    
 
    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にonmouseoverへonclickリスナーに変更されるように見えます：

function showDropdown(idSelector) { 
 
    document.getElementById(idSelector).classList.toggle("show"); 
 
    buildDropdown(idSelector); 
 
} 
 

 
function buildDropdown(idSelector) 
 
{ 
 
var newLinks = new Array(); 
 
var finalHtml = ''; 
 
\t if(idSelector === 'home_page_dropdown_b') 
 
    { 
 
    \t newLinks = [ 
 
    \t {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
    } 
 
    else if(idSelector === 'home_page_dropdown_f') 
 
    { 
 
    \t newLinks = [ 
 
    {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
\t } 
 
    
 
    
 
    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 = ''; 
 
\t if(idSelector === 'home_page_dropdown_b') 
 
    { 
 
    \t newLinks = [ 
 
    \t {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
    } 
 
    else if(idSelector === 'home_page_dropdown_f') 
 
    { 
 
    \t newLinks = [ 
 
    {displayText:"Camasi", linkUrl: "#"}, 
 
    \t {displayText:"Pantaloni", linkUrl: "#"}, 
 
     {displayText:"Bluze", linkUrl: "#"}, 
 
     {displayText:"Blugi", linkUrl: "#"}, 
 
     {displayText:"Tricouri", linkUrl: "#"} 
 
    ]; 
 
\t } 
 
    
 
    
 
    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>