Question

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

只有点击它们两次后它才有效。

所以当我将鼠标悬停在它上面时，我想要自动下拉块

有人能给我一些建议吗？

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

看起来您需要做的就是将HTML中的onclick监听器更改为onmouseover：

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

并且有另一种解决方案

＆＃13;

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;
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Javascript导航栏如何修复？

2 个答案: