只有一個子菜單（JavaScript）的

Question

好日子，

的onmouseover顯示試圖讓一個小菜單隻有Javascript和得到了onmouseover事件顯示所有子菜單，而不是隻有一個問題。

這是假設將style.display更改爲block的代碼部分。

var ul = document.getElementById("navMainId"), 
var liDropdown = ul.getElementsByClassName("dropdown"); 

for (var i = 0; i < liDropdown.length; i++) { 
    liDropdown[i].style.display = "inline-block"; 

    liDropdown[i].onmouseover = function() { 
     var ul = document.getElementById("navMainId"), 
      dropdown = ul.getElementsByClassName("dropdown-content"); 


     for (var i = 0; i < dropdown.length; i++) { 
      dropdown[i].style.display = "block";     
     } 
    } 
    liDropdown[i].onmouseleave = function() { 
     var ul = document.getElementById("navMainId"), 
      dropdown = ul.getElementsByClassName("dropdown-content"); 

     for (var i = 0; i < dropdown.length; i++) { 
      dropdown[i].style.display = "none"; 
     } 
    } 
} 

如何更改代碼以使其工作？

這裏是小提琴整個代碼（ssry它是一個爛攤子）：https://jsfiddle.net/apvsnzt5/1/

Answer 1

我已經更新了小提琴：

https://jsfiddle.net/apvsnzt5/3/

你需要做的一切都改變

 dropdown = ul.getElementsByClassName("dropdown-content"); 

至

 dropdown = this.getElementsByClassName("dropdown-content"); 

因此，它將目標定位在「這個」（即您所懸停的LI）上，而不是在UL中查找「下拉內容」。

也在onmouseleave上做到這一點。

Answer 2

以下內容添加到你的CSS部分

.dropdown-content{ 
     display:none ! important; 
    } 
    a:hover+.dropdown-content{ 
     display:block ! important; 
    } 

它會正常工作。

var menuCont = document.createElement("div"); 
 
    document.body.appendChild(menuCont); 
 

 

 
    var ulMain = document.createElement("ul"); 
 
    menuCont.appendChild(ulMain); 
 
    ulMain.className = "navMain"; 
 
    ulMain.id = "navMainId"; 
 

 
    /****** MENU ******/ 
 

 
    
 

 
    // Software 
 
    var liSoftware = document.createElement("li"); 
 
    liSoftware.className = "menu dropdown"; 
 
    ulMain.appendChild(liSoftware); 
 
    var aSoftware = document.createElement("a"); 
 
    aSoftware.className = "menuName dropbtn"; 
 
    aSoftware.href = "#"; 
 
    aSoftware.textContent = "Test1"; 
 
    liSoftware.appendChild(aSoftware); 
 

 
    // GeCoSoft 
 
    var liGeco = document.createElement("li"); 
 
    liGeco.className = "menu dropdown"; 
 
    ulMain.appendChild(liGeco); 
 
    var aGeco = document.createElement("a"); 
 
    aGeco.className = "menuName dropbtn"; 
 
    aGeco.href = "#"; 
 
    aGeco.textContent = "Test2"; 
 
    liGeco.appendChild(aGeco); 
 

 
    
 
    /******* Submenu *******/ 
 

 
    // Software Sub 
 

 
    var divSubSoft = document.createElement("div"); 
 
    divSubSoft.className = "dropdown-content"; 
 
    liSoftware.appendChild(divSubSoft); 
 

 
    var aSub1 = document.createElement("a"), 
 
     aSub2 = document.createElement("a"); 
 

 
    aSub1.className = "menuSubName"; 
 
    aSub1.textContent = "SubMenu1"; 
 
    aSub1.href = "#"; 
 
    aSub2.className = "menuSubName"; 
 
    aSub2.textContent = "SubMenu2"; 
 
    aSub2.href = "#"; 
 

 
    divSubSoft.appendChild(aSub1); 
 
    divSubSoft.appendChild(aSub2); 
 

 
    // Gecosoft Sub 
 

 
    var divSubGeco = document.createElement("div"); 
 
    divSubGeco.className = "dropdown-content"; 
 
    liGeco.appendChild(divSubGeco); 
 

 
    var aSub3 = document.createElement("a"), 
 
     aSub4 = document.createElement("a"); 
 

 
    aSub3.className = "menuSubName"; 
 
    aSub3.textContent = "Submenu3"; 
 
    aSub3.href = "#"; 
 
    aSub4.className = "menuSubName"; 
 
    aSub4.textContent = "SubMenu4" 
 
    aSub4.href = "#"; 
 

 
    divSubGeco.appendChild(aSub3); 
 
    divSubGeco.appendChild(aSub4); 
 

 
    /****** MENU STYLE ******/ 
 

 
    var i = ""; 
 

 
    
 
    ulMain.style.listStyleType = "none"; 
 
    ulMain.style.margin = "0px"; 
 
    ulMain.style.padding = "0px";  
 
    ulMain.style.overflow = "hidden"; 
 
    ulMain.style.backgroundColor = "rgb(232, 225, 225)"; 
 

 
    var ul = document.getElementById("navMainId"), 
 
     li = ul.getElementsByTagName("li"); 
 

 
    for (var i = 0; i < li.length; i++) { 
 
     li[i].style.cssFloat = "left"; 
 
    } 
 

 
    var a = ul.getElementsByTagName("a"); 
 

 
    for (var i = 0; i < a.length; i++) { 
 
      a[i].style.display = "inline-block"; 
 
      a[i].style.color = "black"; 
 
      a[i].style.textAlign = "center"; 
 
      a[i].style.padding = "14px 16px"; 
 
      a[i].style.textDecoration = "none"; 
 
      a[i].onmouseover = function() { 
 
       this.style.backgroundColor = "rgb(174, 170, 170)";    
 
      } 
 
      a[i].onmouseleave = function() { 
 
       this.style.backgroundColor = "rgb(232, 225, 225)"; 
 
      } 
 
    } 
 

 
/************ Dont know what to do here **************/ 
 
    var liDropdown = ul.getElementsByClassName("dropdown"); 
 

 
    for (var i = 0; i < liDropdown.length; i++) { 
 
     liDropdown[i].style.display = "inline-block"; 
 

 
     liDropdown[i].onmouseover = function() { 
 
      var ul = document.getElementById("navMainId"), 
 
       dropdown = ul.getElementsByClassName("dropdown-content"); 
 

 

 
      
 
      for (var i = 0; i < dropdown.length; i++) { 
 
       dropdown[i].style.display = "block";     
 
      } 
 
     } 
 
     liDropdown[i].onmouseleave = function() { 
 
      var ul = document.getElementById("navMainId"), 
 
       dropdown = ul.getElementsByClassName("dropdown-content"); 
 

 
      for (var i = 0; i < dropdown.length; i++) { 
 
       dropdown[i].style.display = "none"; 
 
      } 
 
     } 
 
    } 
 

 
    var divDropCont = ul.getElementsByClassName("dropdown-content"); 
 

 
    for (var i = 0; i < divDropCont.length; i++) { 
 
     divDropCont[i].style.display = "none"; 
 
     divDropCont[i].style.position = "absolute"; 
 
     divDropCont[i].style.backgroundColor = "#f9f9f9"; 
 
     divDropCont[i].style.minWidth = "160px"; 
 
     divDropCont[i].style.boxShadow = "0px 8px 16px 0px rgba(0,0,0,0.2)"; 
 
    } 
 

 
    var aDropCont = ul.getElementsByClassName("menuSubName"); 
 

 
    for (var i = 0; i < aDropCont.length; i++) { 
 
     aDropCont[i].style.color = "black"; 
 
     aDropCont[i].style.padding = "12px 16px"; 
 
     aDropCont[i].style.textDecoration = "none"; 
 
     aDropCont[i].style.display = "block"; 
 
     aDropCont[i].style.textAlign = "left"; 
 
     aDropCont[i].onmouseover = function() { 
 
      this.style.backgroundColor = "rgb(174, 170, 170)"; 
 
     } 
 
     aDropCont[i].onmouseleave = function() { 
 
      this.style.backgroundColor = "rgb(249, 249, 249)"; 
 
     } 
 
    }

.dropdown-content{ 
 
    display:none ! important; 
 
} 
 
a:hover+.dropdown-content{ 
 
    display:block ! important; 
 
}

Answer 3

看來你有不正確的參考容器Mouser的時候了。你需要基於你的位置的具體內容。

var dropdown = this.getElementsByClassName("dropdown-content"); 

try updated fiddle