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>

  • 相关阅读:
    接口测试
    jmeter直连数据库
    登录功能的测试用例设计
    oracle 同义词synonym
    oracle常用函数
    python环境搭建--pycharm的安装及使用
    JavaScript数组函数
    JavaScript:var、let、作用域
    HTML入门到精通(带你全面避坑)
    使用VirtualBox安装CentOS7
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/3709900.html
Copyright © 2011-2022 走看看