Javascript 导航栏如何修复？

Question

我制作了这个 javascript 导航栏，我使用了一个简单的 CSS 使其看起来和正常工作，但问题是当我将鼠标悬停在按钮上时我的下拉菜单不起作用，我不知道为什么会这样。

它只有在我对它们都单击 1 次后才有效。

所以我想当我将鼠标悬停在它上面时自动下拉该 block

谁能给我一些建议？

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>