HTML+JS模擬實(shí)現(xiàn)QQ下拉菜單效果

更新時間：2022年05月23日 10:06:49 作者：一夕ξ

這篇文章主要為大家詳細(xì)介紹了如何利用HTML+JavaScript模擬實(shí)現(xiàn)QQ中的下拉菜單效果。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下

功能：

1、點(diǎn)擊我的好友會展開下拉出具體的好友

2、再次點(diǎn)擊，會折疊內(nèi)容

3、首次點(diǎn)擊某個具體的好友，只有當(dāng)前這個好友高亮

4、再次點(diǎn)擊這個好友時，高亮狀態(tài)就會消失

主要練習(xí)：js綁定事件

慢慢修改小細(xì)節(jié)：再次點(diǎn)擊，會折疊內(nèi)容時，里面的高亮要全部取消

實(shí)現(xiàn)代碼

<!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: auto;
            padding: 0px
        }
        
        .content {
            position: relative;
            top: 40px;
            width: 280px;
            height: auto;
            border: 1px solid black;
            margin: 0 auto
        }
        
        span {
            display: inline-block;
            border-bottom: 1px dotted grey;
            width: 100%;
            background-color: red;
        }
        
        li {
            padding-left: 20px;
            list-style: none;
        }
        
        ul {
            display: none
        }
    </style>
</head>
 
<body>
    <div class="box1">
        <div class="content">
            <div class="cl1"><span>
                <img src="右箭頭.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;"> 我的好友
            </span>
 
                <ul>
                    <li>lili</li>
                    <li>zhangsan</li>
                    <li>uncle</li>
                </ul>
            </div>
            <div class="cl1">
                <span>
                    <img src="右箭頭.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;">企業(yè)好友
                </span>
                <ul>
                    <li>lili</li>
                    <li>zhangsan</li>
                    <li>uncle</li>
                </ul>
            </div>
            <div class="cl1"><span>
                <img src="右箭頭.png" alt="" style="width:20px;height:20px;vertical-align: text-bottom;">黑名單
            </span>
 
                <ul>
                    <li>lili</li>
                    <li>zhangsan</li>
                    <li>uncle</li>
                    <li>unle</li>
                    <li>une</li>
                </ul>
            </div>
        </div>
 
    </div>
    <script>
        //點(diǎn)擊分組，顏色改變，下面的選項(xiàng)出來
        var cls = document.querySelectorAll('span')
        var uls = document.querySelectorAll('ul')
 
        for (i = 0; i < cls.length; i++) {
            cls[i].addEventListener('click', function() {
                if (this.flag == 0) {
                    this.style.backgroundColor = 'skyblue'
                    this.children[0].src = '實(shí) 向下箭頭-01.png'
                    console.log(uls[this.index]);
                    uls[this.index].style.display = 'block'
                    this.flag = 1
                } else if (this.flag == 1) {
                    this.style.backgroundColor = 'red'
                    this.children[0].src = '右箭頭.png'
                    console.log(uls[this.index]);
                    uls[this.index].style.display = 'none'
                    this.flag = 0
                        //需要把li全部取消高亮
                    for (j = 0; j < uls.length; j++) {
                        for (m = 0; m < uls[j].children.length; m++) {
                            uls[j].children[m].style.backgroundColor = 'white'
                            uls[j].children[m].states = 0
                        }
 
                    }
                }
            })
            cls[i].index = i //通過添加一個屬性，進(jìn)行索引
            cls[i].flag = 0
        }
        for (i = 0; i < uls.length; i++) { //利用事件冒泡對具體好友綁定點(diǎn)擊事件
            uls[i].addEventListener('click', function(e) {
                console.log(e.target);
                console.log(e.target.states);
                if (e.target.states == 0) {
                    // this.style.backgroundColor = 'pink'//不能用this，這里的this指向的是uls[i]
                    e.target.style.backgroundColor = 'pink'
                    e.target.states = 1
                } else if (e.target.states == 1) {
                    // this.style.backgroundColor = 'pink'//不能用this，這里的this指向的是uls[i]
                    e.target.style.backgroundColor = 'white'
                    e.target.states = 0
                }
            })
            console.log(uls[i].children.length);
            for (j = 0; j < uls[i].children.length; j++) {
                uls[i].children[j].states = 0
            }
        }
        ///關(guān)鍵在于第二次重復(fù)點(diǎn)擊
    </script>
</body>
 
</html>

需要加索引時，一般說通過自定義屬性來設(shè)置

可以將該元素視為一個對象，為期添加一個屬性，就可以進(jìn)行索引

另外一種可以在for循環(huán)，使用閉包原理

相比，加屬性的方法更加方便

以上就是HTML+JS模擬實(shí)現(xiàn)QQ下拉菜單效果的詳細(xì)內(nèi)容，更多關(guān)于JS QQ下拉菜單的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: