用javascript實現簡單的下拉折疊菜單效果
實現步驟
（a）獲得各操作的dom對象；
（b）在所有菜單按鈕對象上添加單擊事件；
（c）設置所有菜單按鈕樣式為空，並將當前按鈕的樣式設置為“active”；同時設置div1下面的所有div元素的display為none，並將當前按鈕所對應的div的display為block
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Gary_js實現簡單的下拉折疊菜單</title> <style> * {margin:0px; padding:0px;} #div1 {width:200px; margin:0 auto; line-height:25px;} ul {list-style:none;} li {background:#ccc;margin-bottom:3px;} dl {background:#eee; display:none;} .active {background:#F90;} </style> <script> //此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的 </script> </head> <body> <div id="div1"> <ul id="menu"> <li class="active">菜單1</li> <dl style="display:block;"> <dd>菜單1.1</dd> <dd>菜單1.2</dd> <dd>菜單1.3</dd> <dd>菜單1.4</dd> </dl> <li>菜單2</li> <dl> <dd>菜單2.1</dd> <dd>菜單2.2</dd> <dd>菜單2.3</dd> <dd>菜單2.4</dd> </dl> <li>菜單3</li> <dl> <dd>菜單3.1</dd> <dd>菜單3.2</dd> <dd>菜單3.3</dd> <dd>菜單3.4</dd> </dl> </ul> </div> </body> </html>
效果一
點擊一級菜單時彈出二級子菜單，不需要對菜單進行 display==“none”?true:false 判斷(缺點：無法把三個一級菜單狀態都設置為"display")
window.onload = function () { var lis = document.getElementsByTagName('li'); var dls = document.getElementsByTagName('dl'); for (var i = 0; i < lis.length; i ++) { lis[i].index = i; lis[i].onclick = function () { for (var i = 0; i < lis.length; i ++) { lis[i].className =''; dls[i].style.display = 'none'; } this.className = 'active'; dls[this.index].style.display = 'block'; } } }
效果二
點擊一級菜單彈時進行display==“none”?true:false 使二級菜單實現點擊收縮功能
<script> //此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的 window.onload = function () { var lis = document.getElementsByTagName('li'); var dls = document.getElementsByTagName('dl'); for (var i = 0; i < lis.length; i ++) { lis[i].index = i; lis[i].onclick = function () { for (var i = 0; i < lis.length; i ++) { lis[i].className =''; } this.className = 'active'; if(dls[this.index].style.display == 'block') dls[this.index].style.display = 'none' else dls[this.index].style.display = 'block' } } } </script>
效果三
通過animate.css 添加實現二級子菜單動畫展開動畫
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Gary_js實現簡單的下拉折疊菜單</title> <style> * {margin:0px; padding:0px;} #div1 {width:200px; margin:0 auto; line-height:25px;} ul {list-style:none;} li {background:#ccc;margin-bottom:3px;} dl {background:#eee;display:none; transform-origin:50% 0; -webkit-animation:gary .5s ease-in; transition: all .3s infinite;} .active {background:#F90;} @-webkit-keyframes gary{ 0%{transform:scale(1,0);} 25%{transform:scale(1,1.2);} 50%{transform:scale(1,0.85);} 75%{transform:scale(1,1.05);} 100%{transform:scale(1,1);} } </style> <script> //此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的 window.onload = function () { var lis = document.getElementsByTagName('li'); var dls = document.getElementsByTagName('dl'); for (var i = 0; i < lis.length; i ++) { lis[i].index = i; lis[i].onclick = function () { for (var i = 0; i < lis.length; i ++) { lis[i].className =''; } this.className = 'active'; if(dls[this.index].style.display == 'block') dls[this.index].style.display = 'none' else dls[this.index].style.display = 'block' } } } </script> </head> <body> <div id="div1"> <ul id="menu"> <li class="active">菜單1</li> <dl style="display:block;"> <dd>菜單1.1</dd> <dd>菜單1.2</dd> <dd>菜單1.3</dd> <dd>菜單1.4</dd> </dl> <li>菜單2</li> <dl> <dd>菜單2.1</dd> <dd>菜單2.2</dd> <dd>菜單2.3</dd> <dd>菜單2.4</dd> </dl> <li>菜單3</li> <dl> <dd>菜單3.1</dd> <dd>菜單3.2</dd> <dd>菜單3.3</dd> <dd>菜單3.4</dd> </dl> </ul> </div> </body> </html>
動畫實現原理
@keyframes創建動畫 傳送門
創建動畫是通過逐步改變從一個CSS樣式設定到另一個。
在動畫過程中，您可以更改CSS樣式的設定多次。
指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。
為了獲得最佳的瀏覽器支持，您應該始終定義為0％和100％的選擇器。
transform-origin 屬性：改變被轉換元素的位置 傳送門
transform-origin: x-axis y-axis z-axis;
animation 屬性：將動畫與 div 元素綁定 傳送門
animation: name duration timing-function delay iteration-count direction;
transition-timing-function 屬性 傳送門
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
| linear | 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 |
| ease | 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 |
==================================分割線
H5頁面運行時使用console.log()在控制台查看點擊標簽下標
<script> //此處編寫js代碼，實現簡單的下拉折疊菜單，默認菜單1是展開的 window.onload = function () { var lis = document.getElementsByTagName('li'); var dls = document.getElementsByTagName('dl'); for (var i = 0; i < lis.length; i ++) { lis[i].index = i; lis[i].onclick = function () { //清空所有的樣式 for (var i = 0; i < lis.length; i ++) { lis[i].className =''; } this.className = 'active'; if(dls[this.index].style.display == 'block') dls[this.index].style.display = 'none' else dls[this.index].style.display = 'block' console.log(this.index) console.log(i) } } } </script>
可以看到，若果不使用lis[i].index = i去得到元素下標，那么i會不斷指向數組元素最大值的下一個值！！！
//貪心的想在控制台上獲得更多的信息 console.log(dls[this.index])
