打开/关闭菜单单击时仅使用 javascript 没有 jquery

Question

这是我的html文件

<form id="form1" runat="server">
    <div class ="mvbar">
        <ul>
            <li><a href ="m">Home</a></li>
            <li><a href ="m">About</a></li>
            <li class="pjlist" onclick="load"><a href ="m">Projects</a>
                <div class="sub1">
                <ul>
                    <div class="arrow1"></div>
                    <li><a href ="m">Projects1</a></li>
                    <li><a href ="m">Projects2</a></li>
                    <li><a href ="m">Projects3</a></li>
                </ul>
                </div>
            </li>
            <li class="svlist" onclick="load"><a href ="m">Services</a>
                <div class="sub2">
                <ul>
                    <div class="arrow2"></div>
                    <li><a href ="m">Services1</a></li>
                    <li><a href ="m">Services2</a></li>
                    <li><a href ="m">Services3</a></li>
                    <li><a href ="m">Services4</a></li>
                    <li><a href ="m">Services5</a></li>
                </ul></div>
            </li>
            <li><a href ="m">Contact Us</a></li>
        </ul>
    </div>
    </form>

这是我的 CSS 类

.mvbar ul {
   list-style:none;
   margin:0;
   padding:0;
}

.mvbar li {
    float:left;
    width:15%;
    text-align:center;
    background-color:grey;
    border-right:1px solid white;
    position:relative;
}

.mvbar li ul{
    position:absolute;
    top:30px;
}

.mvbar li ul li{
    float:none;
    width:210%;
    text-align:left;
    padding-left:4px;

}


.mvbar a {
    font-family:'Meiryo UI',Verdana,sans-serif;
    color:black;
    text-decoration:none;
    display:block;
}

.arrow1 {
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid grey;
    position:relative;
    right:-80%;
}

.arrow2 {
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid grey;
    position:relative;
    right:-80%;
}

.sub1 {
    visibility:hidden;
}

.sub2 {
    visibility:hidden;
}

我可以在 css 中做同样的事情，但需要添加许多例外才能在每个浏览器中工作，但 javascript 是我以前没有使用过的东西，有人建议我这样做相当容易用它。 所以请有人告诉我如何仅使用 javascript 打开/关闭子菜单。

提前致谢！！！

Answer 1

试试这个，它可以在“悬停”事件上工作，而不是在“点击”上，而是在完整的 css 上。

.mvbar ul {
   list-style:none;
   margin:0;
   padding:0;
}

.mvbar li {
    float:left;
    width:15%;
    text-align:center;
    background-color:grey;
    border-right:1px solid white;
    position:relative;
}

.mvbar li ul{
    position:absolute;
    top: 100%;
    width: 50%;
}

.mvbar li ul li{
    float:none;
    width:210%;
    text-align:left;
    padding-left:4px;

}


.mvbar a {
    font-family:'Meiryo UI',Verdana,sans-serif;
    color:black;
    text-decoration:none;
    display:block;
}

.arrow2,
.arrow1 {
    width:0;
    height:0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid grey;
    position:relative;
    right:-80%;
}

.sub1,
.sub2
{
    visibility:hidden;
}


ul li:hover div
{
    visibility: visible;
}

ul li:hover ul
{
    visibility: visible;
}

Answer 2

试试这个：

<style>
    .mvbar ul {
       list-style:none;
       margin:0;
       padding:0;
    }

    .mvbar li {
        float:left;
        width:15%;
        text-align:center;
        background-color:grey;
        border-right:1px solid white;
        position:relative;
    }

    .mvbar li ul{
        position:absolute;
        top: 100%;
        width: 50%;
    }

    .mvbar li ul li{
        float:none;
        width:210%;
        text-align:left;
        padding-left:4px;

    }


    .mvbar a {
        font-family:'Meiryo UI',Verdana,sans-serif;
        color:black;
        text-decoration:none;
        display:block;
    }

    .arrow2,
    .arrow1 {
        width:0;
        height:0;
        border-left:12px solid transparent;
        border-right:12px solid transparent;
        border-bottom:12px solid grey;
        position:relative;
        right:-80%;
    }

    .sub1,
    .sub2
    {
        visibility: hidden;
    }

</style>
        <form id="form1" runat="server">
    <div class ="mvbar">
        <ul>
            <li><a href ="m">Home</a></li>
            <li><a href ="#">About</a></li>
            <li id="pjlist"><a href ="#">Projects</a>
                <div class="sub1">
                    <ul>
                        <div class="arrow1"></div>
                        <li><a href ="m">Projects1</a></li>
                        <li><a href ="m">Projects2</a></li>
                        <li><a href ="m">Projects3</a></li>
                    </ul>
                </div>
            </li>
            <li id="svlist" onclick="load"><a href ="m">Services</a>
                <div class="sub2">
                <ul>
                    <div class="arrow2"></div>
                    <li><a href ="m">Services1</a></li>
                    <li><a href ="m">Services2</a></li>
                    <li><a href ="m">Services3</a></li>
                    <li><a href ="m">Services4</a></li>
                    <li><a href ="m">Services5</a></li>
                </ul></div>
            </li>
            <li><a href ="m">Contact Us</a></li>
        </ul>
    </div>
    </form>
    </body>
</html>
<script>
    var myMenu = document.getElementById("pjlist");
    var open = false;
    myMenu.addEventListener("click", function()
    {
        if(open)
        {
            //then close
            open = !open;
            var mySubMenu = myMenu.getElementsByTagName('div');
            mySubMenu[0].style.visibility =  'hidden';
        }
        else
        {
            //open
            open = !open;
            var mySubMenu = myMenu.getElementsByTagName('div');
            mySubMenu[0].style.visibility =  'visible';
        }
    });

</script>

你可以使用

    var myMenus = document.getElementsByClassName()

在所有子菜单上添加事件监听器。

祝你好运