点击显示或隐藏列表

时间：2014-05-11 16:06:25 收藏：0 阅读：320

素材： bubuko.com,布布扣

<!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">
    p, ul, li { padding: 0; margin: 0; list-style: none; }
    #box { font-size: 12px; color: #00c; width: 58px; margin: 0 auto; }
    p { width: 55px; height: 24px; line-height: 24px; padding-left: 3px; background: url(ico.gif) no-repeat right 4px; }
    ul { width: 56px; border: 1px solid #9a99ff; display: none-; }
    a { text-decoration: none; display: block; height: 24px; line-height: 24px; text-align: center; color: #00c; }
    a:hover { background: #d9e1f6; }
</style>
</head>
<body>
<div id="box">
    <p id="btn">输入法</p>
    <ul id="ul1" style="display:block;">
        <li><a href="#">手写</a></li>
        <li><a href="#">拼音</a></li>
        <li><a href="#">关闭</a></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var oP = document.getElementById(‘btn‘);
    var oUl=document.getElementById(‘ul1‘);
    oP.onclick=function(){
        if(oUl.style.display=="block"){
            oUl.style.display="none"
        }else{
            oUl.style.display="block"
        }
    }
</script>
</html>

点击显示或隐藏列表,布布扣,bubuko.com