js實現下拉菜單效果

時間 2019-12-25

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font-family: "Microsoft YaHei";font-size: 12px;color: #666;}
        .container{width: 100px;margin: 50px auto;}
        ul{list-style: none;font-size: 14px;border: 1px solid #ccc;color: #666;width: 100px;height: 150px;display: none;}
        a{text-decoration: none;display: block;width: 100px;height: 29px;line-height: 29px;text-align: center;color: #ccc;border-bottom: 1px solid #ccc;}
        #shezhi{background: #eaeaea;color: #666666;border-bottom: none;}
        .nobot{border-bottom: none;}
    </style>
</head>
<body>
    <div class="container">
        <a href="#"id="shezhi"class="nobot">設置</a>
        <ul id="menue">
            <li><a href="#">清除記錄</a></li>
            <li><a href="#">清除記錄</a></li>
            <li><a href="#">清除記錄</a></li>
            <li><a href="#">清除記錄</a></li>
            <li><a href="#"class="nobot">清除記錄</a></li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var oMenue=document.getElementById('menue');
   var oShwzhi=document.getElementById('shezhi');
    var oA=oMenue.getElementsByTagName('a');
    var timer =null;
    oShwzhi.onmouseover= oMenue.onmouseover=function(){
        clearInterval(timer);
        oMenue.style.display = 'block';
    };
    oShwzhi.onmouseout=oMenue.onmouseout=function(){
        timer = setInterval(function(){
            oMenue.style.display = 'none';
        },300);
    };
    for(var i=0;i<oA.length;i++){
        oA[i].onmouseover=function(){
            clearInterval(timer);
            this.style.background="#ccc";
            this.style.color="#fff";
        };
        oA[i].onmouseout=function(){
            this.style.background="";
            this.style.color="#ccc";
        }
    }
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。