基于JavaScript的动态菜单的制作方法

最新推荐文章于 2019-08-02 17:40:05 发布

weixin_30823227

最新推荐文章于 2019-08-02 17:40:05 发布

阅读量336

点赞数

文章标签： javascript 数据库前端 ViewUI

原文链接：http://www.cnblogs.com/wangchunlei123/archive/2012/12/26/2834630.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JavaScript制作动态菜单</title>
    <style type="text/css">
        #parent > li
        {
            list-style-type: none;
            float: left;
            width: 150px;
            background-color: #EECBAD;
            text-align: center;
            border-width: thin;
            border-style: solid;
            border-color: Black;
        }
        .hide
        {
            display: none;
        }
        .show
        {
            list-style-type: none;
            display: block;
            margin: 0px;
            padding: 0px;
            background-color: #CDC9C9;
        }
    </style>
    <script type="text/javascript">
        //子菜单显示时的调用方法
        function show() {
            var ul = this.getElementsByTagName("ul");
            for (var i = 0; i < ul.length; i++) {
                if (ul[i].className == "hide") {
                    ul[i].className = "show";
                }
            }
        }
        //body初始化方法
        function init() {
            var ul = document.getElementById("parent");
            var lis = ul.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = show;
                //此处使用匿名函数来代替调用函数
                lis[i].onmouseout = function () {
                    var ul = this.getElementsByTagName("ul");
                    for (var i = 0; i < ul.length; i++) {
                        if (ul[i].className == "show") {
                            ul[i].className = "hide"
                        }
                    }
                }
            }
        }
    </script>
</head>
<body οnlοad="init()">
    <ul id="parent">
        <li>文件
            <ul class="hide">
                <li>新建</li>
                <li>打开</li>
                <li>关闭</li>
            </ul>
        </li>
        <li>编辑
            <ul class="hide">
                <li>复制</li>
                <li>粘贴</li>
                <li>剪切</li>
            </ul>
        </li>
        <li>视图
            <ul class="hide">
                <li>解决方案管理器</li>
                <li>CSS属性</li>
                <li>管理样式</li>
            </ul>
        </li>
        <li>项目
            <ul class="hide">
                <li>添加类</li>
                <li>添加新项</li>
                <li>生成</li>
            </ul>
        </li>
    </ul>
</body>
</html>

转载于:https://www.cnblogs.com/wangchunlei123/archive/2012/12/26/2834630.html

weixin_30823227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于JavaScript的动态菜单的制作方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <titl...
复制链接

扫一扫