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

尝试这一点，它可以在'hover'事件上工作，而不是'click'但是完整的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()

在所有菜单中添加事件列表器。

祝你好运

打开/关闭菜单单击仅使用javascript no jquery

2 个答案: