JavaScript實現二級菜單的制作
本文實例為大傢分享瞭JavaScript實現二級菜單效果的具體代碼,供大傢參考,具體內容如下
這次實現的效果圖如下:
這個二級菜單實現的效果是:
當點擊某一個框時,會將已經打開的框的內容收回,再展開現在點擊的框的內容。
那要如何實現這個效果呢?
我們可以step by step
1、首先我們要將整個框架顯示出來,即所有框展開的樣子,因為其顯示/不顯示是拿overflow:hidden做的。
但是要註意不要所有的框都拿一種類型的盒子做,因為那樣不方便寫js代碼,畢竟我們之後的操作是點擊綠色的框=>使得收起或展開白色的框,所以我們需要為每一個天數+對應課程的框放在一個div父盒子下。然後為其初始化:設置高度等於span的高度,設置overflow:hidden,如下圖,可以結合下面代碼
2、然後開始寫js部分:確保點擊某一框時,它會由閉合變為展開。我們的框是span,如果想要span的父盒子div中的內容全部顯示,我們首先需要通過document.getElementsByTagName(“span”)獲取所有的span,然後利用for循環在每一個span的onclick響應函數中通過parentNode獲取其對應的父盒子,使其父盒子的高度變為其scrollHeight的值
3、然後我們需要在點擊span使某盒子展開的時候,將已經展開的盒子收起。這時我們就需要一個變量now來記錄上次被點擊的盒子,令其初值為null,若now不等於當前點擊的span,則獲取now的父盒子,令其高度變為span的高度,然後令當前點擊的span展開(第二點已經講瞭怎麼展開);若now等於當前點擊的span,獲取其父盒子的高度,如果等於span的高度,則令其高度變為scrollHeight的值,否則令其變為span的高度
4、設置定時器,在準備將父盒子高度增加或減少的時候調用,當父盒子高度達到span的高度或達到scrollHeight,就關閉定時器(可以設置兩個定時器)
代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .container { width: 300px; height: 700px; margin: 100px auto; } .container div { height: 43px; overflow: hidden; } .container div span { width: 150px; height: 40px; line-height: 40px; border-radius: 15px; display: block; text-align: center; background-color: rgba(104, 250, 201, 0.849); cursor: pointer; } a { width: 150px; height: 40px; line-height: 40px; text-decoration: none; display: block; text-align: center; } </style> </head> <body> <div class="container"> <div id=""> <span id="one">周一</span> <a href="">可視化</a> <a href="">可視化</a> </div> <div id=""> <span id="two">周二</span> <a href="">算法設計</a> <a href="">圖形學</a> <a href="">計組課設</a> <a href="">操作系統</a> </div> <div id=""> <span id="three">周四</span> <a href="">形勢與政策</a> <a href="">操作系統</a> </div> <div id=""> <span id="four">周五</span> <a href="">算法設計</a> </div> </div> <script> let menu = document.getElementsByTagName("span"); let now = null; for (let i = 0; i < menu.length; i++) { menu[i].onclick = function () { let par = menu[i].parentNode; if (now === i) { if (par.style.height === "43px") { open(par); } else { close(par); } } else { if (now !== null) { close(menu[now].parentNode); } open(par); now = i; } } } function open(par) { let tem = setInterval(() => { let num = par.offsetHeight; if (num >= par.scrollHeight) { clearInterval(tem); } par.style.height = num + 1 + "px"; }, 7); } function close(par) { let tem = setInterval(() => { let num = par.offsetHeight; if (num <= 43) { clearInterval(tem); return; } par.style.height = num - 1 + "px"; }, 7); } </script> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。