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>

  • 相关阅读:
    2019.1.1-11 总结
    配置文件的选择
    2019.1.1-5 总结
    shell 脚本
    2017- 感谢自己
    debug和release版本的区别
    linux 下一些命令
    Python中getopt()函数的使用
    开发环境的一些基本认识
    Leetcode 49. Group Anagrams
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/3709900.html
Copyright © 2011-2022 走看看