JavaScript實現(xiàn)二級菜單的制作
本文實例為大家分享了JavaScript實現(xiàn)二級菜單效果的具體代碼，供大家參考，具體內(nèi)容如下
這次實現(xiàn)的效果圖如下：
這個二級菜單實現(xiàn)的效果是：
當點擊某一個框時，會將已經(jīng)打開的框的內(nèi)容收回，再展開現(xiàn)在點擊的框的內(nèi)容。
那要如何實現(xiàn)這個效果呢？
我們可以step by step
1、首先我們要將整個框架顯示出來，即所有框展開的樣子，因為其顯示/不顯示是拿overflow:hidden做的。
但是要注意不要所有的框都拿一種類型的盒子做，因為那樣不方便寫js代碼，畢竟我們之后的操作是點擊綠色的框=>使得收起或展開白色的框，所以我們需要為每一個天數(shù)+對應課程的框放在一個div父盒子下。然后為其初始化：設置高度等于span的高度，設置overflow:hidden，如下圖，可以結合下面代碼
2、然后開始寫js部分：確保點擊某一框時，它會由閉合變?yōu)檎归_。我們的框是span，如果想要span的父盒子div中的內(nèi)容全部顯示，我們首先需要通過document.getElementsByTagName("span")獲取所有的span，然后利用for循環(huán)在每一個span的onclick響應函數(shù)中通過parentNode獲取其對應的父盒子，使其父盒子的高度變?yōu)槠?code>scrollHeight的值
3、然后我們需要在點擊span使某盒子展開的時候，將已經(jīng)展開的盒子收起。這時我們就需要一個變量now來記錄上次被點擊的盒子，令其初值為null，若now不等于當前點擊的span，則獲取now的父盒子，令其高度變?yōu)閟pan的高度，然后令當前點擊的span展開（第二點已經(jīng)講了怎么展開）；若now等于當前點擊的span，獲取其父盒子的高度，如果等于span的高度，則令其高度變?yōu)?code>scrollHeight的值，否則令其變?yōu)閟pan的高度
4、設置定時器，在準備將父盒子高度增加或減少的時候調(diào)用，當父盒子高度達到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="">操作系統(tǒng)</a>
</div>
<div id="">
<span id="three">周四</span>
<a href="">形勢與政策</a>
<a href="">操作系統(tǒng)</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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
給所有的超級練級都加上onmousemove時間的js代碼...2007-08-08
用javascript替換URL中的參數(shù)值示例代碼
本篇文章主要是對用javascript替換URL中的參數(shù)值示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關知識，文中較詳細的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下2017-12-12
之前雖然介紹過一種求數(shù)組最大最小值的方法，但那個方法只是用于數(shù)組中都是數(shù)字的，下面為大家介紹個方法適用于任何數(shù)組，有此需求的朋友可以參考下2013-08-08
下面小編就為大家分享一篇淺談js promise的使用。具有很好的參考價值，看完這篇都懂了。希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
最近遇到的需求,把html轉成pdf文件下載導出,下面這篇文章主要給大家介紹了關于js將html頁面轉為pdf的兩種方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-08-08![[js高手之路]HTML標簽解釋成DOM節(jié)點的實現(xiàn)方法](http://img.jbzj.com/images/xgimg/bcimg6.png)
[js高手之路]HTML標簽解釋成DOM節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄猍js高手之路]HTML標簽解釋成DOM節(jié)點的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了javascript貪吃蛇游戲設計與實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡易封裝彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11