動感實現伸縮顯示二級選單
阿新 • • 發佈：2018-12-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動感實現伸縮顯示二級選單</title> <link rel="stylesheet" href="css/base.css"> <style> .menu{width: 250px;text-align: center;} .menu a{display: block;color: #ccc;font-size: 16px;} .head h2{background: #556a57;width: 100%;height: 45px;line-height: 45px;font-size: 20px;box-shadow: 2px 2px 4px #fff;} .sub a{background: #6f8971;padding: 10px 0;} .sub a:hover{background: #558259;} .sub{overflow: hidden;height: 0;} </style> <script src="js/js.js"></script> </head> <body> <ul class="menu" id="menu"> <li class="sup"> <a href="" class="head"><h2>一級選單1</h2></a> <ul class="sub"> <li><a href="">二級選單1</a></li> <li><a href="">二級選單2</a></li> <li><a href="">二級選單3</a></li> <li><a href="">二級選單4</a></li> <li><a href="">二級選單5</a></li> </ul> </li> <li class="sup"> <a href="" class="head"><h2>一級選單2</h2></a> <ul class="sub"> <li><a href="">二級選單1</a></li> <li><a href="">二級選單2</a></li> <li><a href="">二級選單3</a></li> <li><a href="">二級選單4</a></li> </ul> </li> <li class="sup"> <a href="" class="head"><h2>一級選單3</h2></a> <ul class="sub"> <li><a href="">二級選單1</a></li> <li><a href="">二級選單2</a></li> <li><a href="">二級選單3</a></li> <li><a href="">二級選單4</a></li> <li><a href="">二級選單5</a></li> </ul> </li> <li class="sup"> <a href="" class="head"><h2>一級選單4</h2></a> <ul class="sub"> <li><a href="">二級選單1</a></li> <li><a href="">二級選單2</a></li> <li><a href="">二級選單3</a></li> </ul> </li> <li class="sup"> <a href="" class="head"><h2>一級選單5</h2></a> </li> </ul> </body> </html>
window.onload=function(){ var menu=document.getElementById("menu"); var sups=menu.getElementsByClassName("sup"); for(var i=0;i<sups.length;i++){ (function(i){ sups[i].onmouseover=function(){ var sub=sups[i].getElementsByClassName("sub")[0]; if(sub){ sub.style.height="auto"; } } })(i); (function(i){ sups[i].onmouseout=function(){ var sub=sups[i].getElementsByClassName("sub")[0]; if(sub){ sub.style.height="0"; } } })(i); } }
總結：console.log(sups[0]);
返回的是第一個sup類名的節點內容
延申：自動判斷一級選單是否有子選單，有則新增下拉圖示；js實現緩慢展開與收回；可以再寫一個通用函式判斷是獲取id還是class還是元素標籤，且可以是節點獲取而不只是document獲取？