zoukankan html css js c++ java

<title>下拉菜单</title>

<title>下拉菜单</title>
<style type="text/css">
*
{
    margin:0px;
    padding:0px;
}
#pingmu
{
    width:100%;
    height:100%;
    position:fixed;
    background-color:#FF9;
}
#minzu
{
    width:200px;
    height:300px;
    border:1px solid #000;
    text-align:center;
    background-color:#FFF;
}
#minzu div
{
    width:200px;
    height:50px;
    font-size:20px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
}
#menu
{
    width:198px; 
    height:50px; 
    font-size:20px;
    line-height:50px;
    vertical-align:middle;
    text-align:center;
}
</style>
</head>

<body>
<div id="pingmu" onclick="guan()">
<input type="text" id="menu" value="民族" onclick="xiala()"/>
<div id="minzu" style="display:none">
    <div id="han" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">汉族</div>
    <div id="hui" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">回族</div>
    <div id="man" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">满族</div>
    <div id="chao" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">朝鲜族</div>
    <div id="miao" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">苗族</div>
    <div id="zhang" onmouseover="caidan(this)" onmouseout="out(this)" onclick="quzhi(this)">藏族</div>
</div>
</div>
</body>
<script type="text/javascript">
function caidan(a)
{
    a.style.backgroundColor="red";   //鼠标放上变为红色
}
function out(b)
{
    b.style.backgroundColor="white";    //鼠标移开变回白色
}
function quzhi(c)
{
    var s= c.innerText;
    var y=document.getElementById("menu");    //将选中的值传给表单
    y.value=s;
}
function xiala()
{
    document.getElementById("minzu").style.display="block";  //点击表单元素显示下拉菜单
    stopEventBubble(event);
}
function guan()
{
    document.getElementById("minzu").style.display="none";    //点击菜单外的屏幕部分下拉菜单消失
}


function stopEventBubble(event)    //阻止事件冒泡函数（阻止点击表单元素时下拉菜单消失）
{
    var e=event || window.event;
    if (e && e.stopPropagation)
    {
        e.stopPropagation();    
    }
    else
    {
        e.cancelBubble=true;
    }
}

注意：阻止事件冒泡函数（可复制直接使用）

function stopEventBubble(event)    //阻止事件冒泡函数
{
    var e=event || window.event;
    if (e && e.stopPropagation)
    {
        e.stopPropagation();    
    }
    else
    {
        e.cancelBubble=true;
    }
}

查看全文

相关阅读:
如何在SQL Server 2005 中为安装程序增加计数器注册表项值
 C++ 基础小知识学习［1］
同时支持火狐和IE的输入框内容改变事件
 3D圆角
 Jquery选择器测试
 asp.net 中的 MD5加密和DES加解密算法类
 简单页面控件赋值
 继承IHttpHandler接口实现给网站图片添加水印
 asp.net Ajax
JQuery操作iframe父页面与子页面的元素与方法

原文地址：https://www.cnblogs.com/dcdgmjzhal/p/4765426.html