我們在制作網(wǎng)頁過程中用到列表時一般會使用<ul>或者<ol>標簽，很少用刑<dl>標簽，但是這個三個標簽卻有著不可忽視的作用，畢竟Web標準中要盡最大可能的使用已有的標簽。它們的用途是：
< dl>< /dl>用來創(chuàng)建一個普通的列表,
< dt>< /dt>用來創(chuàng)建列表中的上層項目，
< dd>< /dd>用來創(chuàng)建列表中最下層項目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。
我們可以用<dl></dl>標簽寫一個簡單的點擊事件
樣式

<style>
        dl,dt,dd {
            /* 去掉默認樣式 */
            margin: 0;
            padding: 0;
        }
        dt {
            /* 寬高背景下邊框 */
            width: 300px;
            height: 20px;
            background: blueviolet;
            border-bottom: 1px solid #fff;
            text-align: center;
        }
        dd {
            /* 寬高邊框 樣式隱藏 */
            width: 300px;
            height: 100px;
            border:1px solid #333;
            display: none;
        }
        .block {
            display: block;
        }
        .none {
            display: none;
        }
    </style>

結(jié)構(gòu)

 <div>
        <dl>
            <dt>11</dt>
            <dd>內(nèi)容1</dd>
        </dl>
        <dl>
            <dt>22</dt>
            <dd>內(nèi)容2</dd>
        </dl>
        <dl>
            <dt>33</dt>
            <dd>內(nèi)容3</dd>
        </dl>
    </div>

js部分

<script>
        // getElementsByTagName() 通過標簽名稱查找元素 查找dl標簽
        var dlElement = document.getElementsByTagName('dl');
        // 遍歷數(shù)組
        for(var j = 0; j < dlElement.length; j++) {
            // 給函數(shù)命名
            (function(i) {
                // 通過dl下標為0的最后一個子元素的點擊事件 lastElementChild 最后一個元素節(jié)點
                dlElement[j].firstElementChild.onclick = function() {
                    // console.log(1);
                    // 調(diào)用dl下標為零的的最后一個子元素的類名
                    var a = dlElement[i].lastElementChild.className;
                    // 調(diào)用dl的下標為零的最后一個子元素的   contains 包含
                    var flag = dlElement[i].lastElementChild.classList.contains('block');
                    // 判斷語句 調(diào)用下標為零的最后一個子元素包含block
                    // if else 是判斷語句
                    if(flag) {
                        // 下標為零的最后一個子元素的類名 = none
                        dlElement[i].lastElementChild.className = 'none';
                    }
                    else {
                        // 遍歷數(shù)組
                        for(var k = 0; k < dlElement.length; k++) {
                            // 下標為零的最后一個子元素的類名為none；
                            dlElement[k].lastElementChild.className = 'none';
                        }
                        // 下標為0的最后一個子元素的類名為block
                        dlElement[i].lastElementChild.className = 'block';
                    }
                }
            })(j);
        }
    </script>

Image 12.png

這樣一個簡單的點擊標題出現(xiàn)下拉框事件就完成啦！
希望我的理解可以給你們提供一些幫助，學(xué)識有限，如果有地方出現(xiàn)錯誤或者有更好的方法去實現(xiàn)，歡迎私信！