zoukankan html css js c++ java

用js写的简单的下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
*{ margin:0px auto; padding:0px }
#xianshi{
    width:130px;
    height:30px;
    border:1px solid #666;
    margin-left:400px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    position:relative;
    z-index:999;}
#xianshi:hover{cursor:pointer}
.xiang{ width:130px;
        height:30px;
        border:1px solid #666;
        text-align:center;
        margin-left:400px;
        line-height:30px;
        vertical-align:middle;
        z-index:998;
        position:relative;}
.xiang:hover{cursor:pointer;
        background-color:#93F}
</style>
</head>
<body>
<div style="100%; height:30px; background-color:#F00;margin-top:50px;"></div>
<div style="100%; height:30px;">
    <div id="xianshi" onclick="xian()">111111111</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">111111111</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">222222222</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">333333333</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">444444444</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">555555555</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">666666666</div>
    <div class="xiang" style=" display:none" onclick="huan(this)">777777777</div>
</div>
<div style="100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div>
</body>
<script type="text/javascript">
function xian()
{
　　var s = document.getElementsByClassName("xiang")
　　var a = document.getElementById("xianshi")
　　var nr = a.innerHTML
　　

　　for(i=0;i<s.length;i++)
　　{
　　　　if(s[i].style.display == "none")
　　　　{
　　　　　　s[i].style.display = "block"
　　　　　　if(s[i].innerHTML == nr)
　　　　　　{
　　　　　　　　s[i].style.display = "none"
　　　　　　}

　　　　}
　　　　else
　　　　{
　　　　　　s[i].style.display = "none"
　　　　}
　　}
}

function huan(a)
{
　　var nr = a.innerHTML
　　document.getElementById("xianshi").innerHTML = nr
　　var s = document.getElementsByClassName("xiang")
　　for(i=0;i<s.length;i++)
　　{
　　　　s[i].style.display = "none"
　　}
}
</script>
</html>

效果如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
*{ margin:0px auto; padding:0px }
#xianshi{
    width:130px;
    height:30px;
    border:1px solid #666;
    margin-left:400px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    position:relative;
    z-index:999;}
#xianshi:hover{cursor:pointer}
.xiang{ width:130px;
        height:30px;
        border:1px solid #666;
        text-align:center;
        margin-left:400px;
        line-height:30px;
        vertical-align:middle;
        z-index:998;
        position:relative;}
.xiang:hover{cursor:pointer;
        background-color:#93F}
</style>
</head>
<body>
<div style="100%; height:30px; background-color:#F00;margin-top:50px;"></div>
<div style="100%; height:30px;">
    <div id="xianshi" onclick="xian()"><img src="1.jpg" height="30px" width="130px" /></div>
    <div class="xiang" style=" display:none">222222222</div>
    <div class="xiang" style=" display:none">333333333</div>
    <div class="xiang" style=" display:none">444444444</div>
    <div class="xiang" style=" display:none">555555555</div>
    <div class="xiang" style=" display:none">666666666</div>
    <div class="xiang" style=" display:none">777777777</div>
</div>
<div style="100%; height:30px; background-color:#F00; z-index:-10; position:relative;"></div>
</body>
<script type="text/javascript">

function xian()
{
　　var s = document.getElementsByClassName("xiang");
　　var a = document.getElementById("xianshi");
　　var nr = a.innerHTML;

　　for(i=0;i<s.length;i++)
　　{
　　　　if(s[i].style.display == "none")
　　　　{
　　　　　　s[i].style.display = "block";
          document.getElementById("xianshi").innerHTML = '<img src="3.jpg" height="30px" width="130px" />';
　　　　}
　　　　else
　　　　{
　　　　　　s[i].style.display = "none";
          document.getElementById("xianshi").innerHTML = '<img src="1.jpg" height="30px" width="130px" />';
　　　　}
　　}
}
</script>
</html>

查看全文

相关阅读:
布局重用 include merge ViewStub
AS 常用插件 MD
AS 2.0新功能 Instant Run
AS .ignore插件忽略文件
 AS Gradle构建工具与Android plugin插件【大全】
如何开通www国际域名个人网站
 倒计时实现方案总结 Timer Handler
AS 进行单元测试
 RxJava 设计理念观察者模式 Observable lambdas MD
retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】

原文地址：https://www.cnblogs.com/gaobint/p/6973963.html