javaScript的可收缩菜单的实现

最新推荐文章于 2018-05-12 11:12:16 发布

Cincan

最新推荐文章于 2018-05-12 11:12:16 发布

阅读量446

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Cincan/article/details/52841518

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            ul{
                list-style: none;
            }
            li{
                width: 200px;
                height: 35px;
                float:left;
                background: yellow;
                overflow:hidden;
            }
        </style>


    </head>
    <body>
        <div>
        <ul>
            <li>分类
                <div>
                <p>艺术</p>
                <p>技术</p>
                </div>
            </li>
            <li>中北
                <div>
                <p>游泳馆</p>
                <p>篮球场</p>  
                </div>
            </li>
        </ul>
        </div>
        <script type="text/javascript">
            window.onload = function(){
                var li = document.getElementsByTagName("li");
                for(var i=0;i<li.length;i++){
                    li[i].onmouseover = function(){
                        console.log(this);
                        this.style.overflow = "visible";
                    }
                    li[i].onmouseout = function(){
                        this.style.overflow = "hidden";
                    }
                }
            }

        </script>
    </body>
</html>