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>

  • 相关阅读:
    add() 方法用于向 <select> 添加一个 <option> 元素。
    jQuery LigerUI V1.2.3 (包括API和全部源码) 发布
    jQuery LigerUI V1.2.2 (包括API和全部源码) 发布
    SpringBoot整合Dubbo配合ZooKeeper注册中心
    【转】MySql 三大知识点——索引、锁、事务
    Redis持久化背后的故事
    利用Docker搭建Redis集群
    synchronized的实现原理与应用
    ConcurrentHashMap
    volatile的内存语义与应用
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/3709900.html
Copyright © 2011-2022 走看看