js01输入法下拉列

最新推荐文章于 2022-11-24 14:59:05 发布

qq_41703956

最新推荐文章于 2022-11-24 14:59:05 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/qq_41703956/article/details/83692785

版权

输入法下拉列

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   p,ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
   }
   #box{
    width: 58px;
    font-size: 12px;
    color: #D44B28;
    margin: 0 auto;
    
   }
   p{
    width: 55px;
    height: 24px;
    line-height: 24px;
    padding-right: 3px;
    background: url(img/ico.gif) no-repeat right 4px;
   }
   ul{
    width: 56px;
    border: 1px solid #000;
   }
   a{
    text-decoration: none;
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #D44B28;
   }
   a:hover{
    background-color: #D9E1F6;
   }
  </style>
 </head>
 <body>
  <div id="box">
   <p id="btn">输入法</p>
   <ul id="ul01">
    <li><a href="#">手写</a></li>
    <li><a href="#">拼音</a></li>
    <li><a href="#">关闭</a></li>    
   </ul>
  </div>
 </body>
 <script type="text/javascript">
  window.onload = function()
  {
   var oP = document.getElementById('btn');
   var oUl = document.getElementById('ul01');
   
   oP.onclick = function()	//通过oP做点击事件，通过oUl坐样式改变
   {
    if(oUl.style.display == 'block')	//当oUl是显示时，就让他隐藏
    {
     oUl.style.display = 'none';	//将none赋值给oUl的display
    }
    else	//否则，让他显示
    {
     oUl.style.display = 'block';
    }
   };
  };
  
 </script>
</html>