<!DOCTYPE html><html><head><meta charset="UTF-8"><title>二級菜單的顯示與隱藏</title><style>? ? ?ul{? ? ? margin:0;? ? ? padding: 0;? ? ? list-style: none;? ? ?}? ? ?li{? ? ? width: 100px;? ? ? height: 30px;? ? ? border:1px solid green;? ? ? text-align: center;? ? ? float: left;? ? ? margin:15px;? ? ?}? ? ?#nav2{? ? ? position: absolute;? ? ? top: 50px;? ? ? left: 50px;? ? ?}? ? ? #nav2 li{? ? ? ?display: none;? ? ? }</style></head><body>? <ul id="nav1">? ?<li>1</li>? ?<li>2</li>? ?<li>3</li>? ?<li>4</li>? ?<li>5</li>? ?<li>6</li>? </ul>? <ul id="nav2">? ?<li>1</li>? ?<li>2</li>? ?<li>3</li>? ?<li>4</li>? ?<li>5</li>? ?<li>6</li>? </ul>? <script>? ?var nav1=document.getElementById("nav1").getElementsByTagName("li");? ?var nav2=document.getElementById("nav2").getElementsByTagName("li");? ? ? ?for(var i=0;i<nav1.length;i++){? ? ? ? ? ?nav1[i].index=i? ?nav1[i].onmouseover=function(){? ? ? ?nav2[this.index].style.display="block";? ? ? ? ? ? ? ?}? ? ? ? ? ?nav1[i].onmouseout=function(){? ? ? var t=setTimeout( function(){nav2[this.index].style.display="none";},1000)? ? ? ? ? ? ? ?}? ? ? ?// ? ? nav2[this.index].onmouseover=function(){? ? ? ?// ? ? ?clearTimeout(t);? ? // ? ?nav2[this.index].style.display="block";? ? ? ?// ? ? ? ? }? ? ? ?// ? ? nav2[this.index].onmouseout=function(){? ? // nav2[this.index].style.display="none";? ? ? ?// ? ? ? ? }? ? ? ?}? </script></body></html>
實現二級菜單的顯示于隱藏同時滿足鼠標移入移出二級菜單的要求，謝謝大家？
Echo_Chien
2016-11-10 13:06:23