<script>
/* window.onload=function(){
var daohang=document.getElementById("daohang");
lis=daohang.getElementsByTagName("li");
for(i=0;i<lis.length;i++){
lis[i].style.onmouseover=function(){
uls=lis[i].getElementsByTagName("ul");
uls[0].style.height="130px"
}
lis[i].style.onmouseout=function(){
uls=lis[i].getElementsByTagName("ul");
uls[0].style.height="0"
}
}
}*/
function nav(liID,ulID) {
var oLi = document.getElementById(liID);
var oUl = document.getElementById(ulID);
oLi.onmouseover = function () {
oUl.style.height = '130px';
};
oLi.onmouseout = function () {
oUl.style.height = '0';
}
}
window.onload=function(){
nav('li0','ul0');
nav('li1','ul1');
nav('li2','ul2');
nav('li3','ul3');
}
</script>
<style>
.nav { width: 430px; height: 40px; background: #D73033; text-align: center; line-height: 40px;list-style: none;padding: 0; }
a { color: #fff; text-decoration: none; }
li { width: 100px; height: 40px; background:#D73033; }
.nav>li { float: left; margin-right: 10px; }
.nav>li:last-child { margin-right: 0; }
li>ul { position: absolute; height: 0; overflow: hidden; transition: height 0.5s; list-style: none;padding: 0 ;margin: 0px}
</style>
</head>
<body>
<ul id="daohang" class="nav">
<li id="li0">
<a href="https://bbs.csdn.net/topics/#">首頁</a>
<ul id="ul0">
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
</ul>
</li>
<li id="li1">
<a href="https://bbs.csdn.net/topics/#">首頁</a>
<ul id="ul1">
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
</ul>
</li>
<li id="li2">
<a href="https://bbs.csdn.net/topics/#">首頁</a>
<ul id="ul2">
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
</ul>
</li>
<li id="li3">
<a href="https://bbs.csdn.net/topics/#">首頁</a>
<ul id="ul3">
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
<li><a href="https://bbs.csdn.net/topics/#" >界面設計</a></li>
</ul>
</li>
</ul>
</body>
</html>
uj5u.com熱心網友回復：
因為你在事件內使用事件外的回圈變數i。當事件觸發時，那個回圈早就結束了，那時的i的值已經是回圈最大值加1了。
你可以把事件內的lis[i]改成 this
一定需要用變數i的話，可以用閉包保存住當前回圈的i的值。
for (i = 0; i < lis.length; i++) {
(function(i) {
lis[i].style.onmouseover = function() {
uls = lis[i].getElementsByTagName("ul");
uls[0].style.height = "130px"
}
lis[i].style.onmouseout = function() {
uls = lis[i].getElementsByTagName("ul");
uls[0].style.height = "0"
}
})(i);
}
uj5u.com熱心網友回復：
還有lis[i].style.onmouseover
要改成
lis[i].onmouseover
uj5u.com熱心網友回復：
window.onload = function() {var lis = document.getElementsByClassName("li1");
var uls = document.querySelectorAll(".li1 ul")
for(var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onmouseover = function() {
for(var j = 0; j < lis.length; j++) {
uls[j].style.height = "0";
}
uls[this.index].style.height = "130px";
}
lis[i].onmouseout = function() {
for(var j = 0; j < lis.length; j++) {
uls[j].style.height = "0";
}
}
}
}
你試試這個
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/94055.html
標籤：JavaScript
上一篇：來自小白的一個問題