借用鼠标指定的对象实现动态显示和隐藏菜单

简介: #p > li {             list-style-type:none;             float:left;             width:80px;             cursor:pointer;         }         .

<!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;
            width: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>

目录
相关文章
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
Qml实用技巧:在可视元素之前半透明覆盖一个可视元素,阻止鼠标透(界面)传(防止点击到被遮挡的按钮)
|
7月前
|
定位技术 iOS开发
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
在地图页面,自动布局控件开始是隐藏或在屏幕外需要正常显示时再为正常的显示状态的,需要在显示之前加入
53 0
datagrid中动态显示或隐藏某一列的方法(根据条件判断显示和隐藏)
datagrid中动态显示或隐藏某一列的方法(根据条件判断显示和隐藏)
363 0
第一次机房收费系统之显示全部窗体
第一次机房收费系统之显示全部窗体
44 0
C#编程学习19:mdi窗体中子窗体不能重复打开的三种实现方式
C#编程学习19:mdi窗体中子窗体不能重复打开的三种实现方式
C#编程学习19:mdi窗体中子窗体不能重复打开的三种实现方式
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方
569 0
QT应用编程: QSlider设置滚动块定位到鼠标点击的地方
Qt自定义界面类并提升(提升的窗口部件)
Qt自定义界面类并提升(提升的窗口部件)
1384 0
Qt自定义界面类并提升(提升的窗口部件)
|
C#
C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件
原文:C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013564470/article/details/78339957 ...
4269 0