zoukankan      html  css  js  c++  java
  • 借用鼠标指定的对象实现动态显示和隐藏菜单

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            #p > li {
                list-style-type:none;
                float:left;
                80px;
                cursor:pointer;
            }
            .hide {
                display: none;
            }
            .show {
                position: absolute;
                list-style-type: none;
                display: block;
                margin: 0;
                padding: 0;
                background-color: Gray;
            }
        </style>
        <script>
            //document.getElementsByTagName
            function show(li)
            {
                var ul = l1.getElementsByTagName("ul");
                for (var i = 0; i < ul.length; i++)
                {
                    //alert("执行到这了");
                   // alert(ul.innerText);
                    if (ul[i].className == "hide")
                    {
                        ul[i].className = "show"
                    }
                }
            }

        </script>
    </head>
    <body>
        <ul id="p">
            <li id="l1" onmousemove="show(this)">
                文件
                <ul class="hide" id="memu">
                    <li>新建</li>
                    <li>保存</li>
                    <li>另存为</li>
                    <li>退出</li>
                </ul>
            </li>

            <li>
                编辑
                <ul class="hide" id="memu">
                    <li>新建</li>
                    <li>保存</li>
                    <li>另存为</li>
                    <li>退出</li>
                </ul>
            </li>
            <li>
                插入
                <ul class="hide" id="memu">
                    <li>新建</li>
                    <li>保存</li> 
                    <li>另存为</li>
                    <li>退出</li>
                </ul>
            </li>
            <li>
                窗体
                <ul class="hide" id="memu">
                    <li>新建</li>
                    <li>保存</li>
                    <li>另存为</li>
                    <li>退出</li>
                </ul>
            </li>
            <li>
                帮助
                <ul class="hide" id="memu">
                    <li>新建</li>
                    <li>保存</li>
                    <li>另存为</li>
                    <li>退出</li>
                </ul>
            </li>
        </ul>

    </body>
    </html>

  • 相关阅读:
    数据查询语言DQL 与 内置函数(聚合函数)
    数据操作语言DML与运算符
    解决Nginx重启时提示nginx: [emerg] bind() to 0.0.0.0:80错误
    Linux 重启nginx
    一群猴子排成一圈,按1,2,...,n依次编号
    阿里云云盾服务证书免费CA证书申请与配置 (原)
    Linux 配置文件
    php $_FILES上传失败 error返回值说明
    Ecshop 表结构 字段说明
    JS 笔记~
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/3709900.html
Copyright © 2011-2022 走看看