javascript - 打开/关闭菜单单击时仅使用 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 中做同样的事情，但需要添加许多异常(exception)，以便在每个浏览器中工作，但 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;
}