JavaScript實現二級選單的製作

本文例項為大家分享了實現二級選單效果的具體程式碼，供大家參考，具體內容如下

這次實現的效果圖如下：

JavaScript實現二級選單的製作

這個二級選單實現的效果是：

當點選某一個框時，會將已經開啟的框的內容收回，再展開現在點選的框的內容。

那要如何實現這個效果呢？

我們可以step by step

1、首先我們要將整個框架顯示出來，即所有框展開的樣子，因為其顯示/不顯示是拿overflow:hidden做的。
但是要注意不要所有的框都拿一種型別的盒子做，因為那樣不方便寫程式碼，畢竟我們之後的操作是點選綠色的框=>使得收起或展開白色的框，所以我們需要為每一個天數+對應課程的框放在一個div父盒子下。然後為其初始化：設定高度等於span的高度，設定overflow:hidden

，如下圖，可以結合下面程式碼

JavaScript實現二級選單的製作

2、然後開始寫js部分：確保點選某一框時，它會由閉合變為展開。我們的框是span，如果想要span的父盒子div中的內容全部顯示，我們首先需要通過document.getElementsByTagName("span")獲取所有的span，然後利用for迴圈在每一個span的onclick響應函式中通過parentNode獲取其對應的父盒子，使其父盒子的高度變為其scrollHeight的值

3、然後我們需要在點選span使某盒子展開的時候，將已經展開的盒子收起。這時我們就需要一個變數now來記錄上次被點選的盒子，令其初值為nulwww.cppcns.coml，若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>
www.cppcns.com    <style>
        * {
      www.cppcns.com      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;
        http://www.cppcns.com        }
            }
        }

        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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現二級選單的製作

JavaScript實現二級選單的製作

WordPress用JavaScript和CSS實現二級選單展開手風琴效果

JavaScript實現聯動選單特效

Laya 用List實現二級選單之母項子項通用

elementui dropdown實現二級選單

用純JS實現二級選單效果

JavaScript實現伸縮二級選單

JavaScript實現橫版選單欄

css 實現動態二級選單

jQuery實現二級導航選單的示例

JavaScript實現網頁tab欄效果製作

JavaScript實現網頁下拉選單效果

JavaScript實現HTML導航欄下拉選單

JavaScript實現HTML導航欄下拉選單[懸浮顯示]

python實現二級登陸選單及安裝過程

html+css二級選單的實現

JavaScript實現點選自制選單效果

JavaScript實現點擊出現子選單效果

javascript實現下拉選單效果

JavaScript實現下拉選單的顯示隱藏

JavaScript實現二級選單的製作

相關推薦