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

如何更改代码才能使其正常工作？

这里是关于Fiddle的完整代码（ssry它是一团糟）：https://jsfiddle.net/apvsnzt5/1/

Answer 1

我已经更新了小提琴：

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

您需要做的就是改变

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

到

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

所以它针对＆＃34;这个＆＃34; （作为你徘徊的LI）而不是找到＆＃34;下拉内容＆＃34;在UL内部。

也可以在onmouseleave上进行。

Answer 2

当mouser结束时，您似乎对容器的引用不正确。您需要根据您的追踪位置获得具体内容。

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

try updated fiddle

Answer 3

将以下内容添加到您的css部分

app.route('/*').get(function (req, res){
     res.sendFile('index.html', {root: path.join(__dirname, '../client')});
});

它会正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

onmouseover只显示一个子菜单（Javascript）

3 个答案: