はonmouseover属性、唯一のサブメニュー（Javascriptの）

Question

良い一日を表示

は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

私はフィドル更新しました：あなたが行うために必要なすべてが

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

を変更した

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

を

~

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

これは、UL内の「ドロップダウンコンテンツ」を見つけるのではなく、「this」（あなたが抱いているLIです）をターゲットにするようにします。

また、onmouseleaveで行います。

Answer 2

は、それが正常に動作します一部

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

あなたのCSSに以下を追加します。

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