我们在制作网页过程中用到列表时一般会使用<ul>或者<ol>标签，很少用刑<dl>标签，但是这个三个标签却有着不可忽视的作用，毕竟Web标准中要尽最大可能的使用已有的标签。它们的用途是：
< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< 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>

结构

 <div>
        <dl>
            <dt>11</dt>
            <dd>内容1</dd>
        </dl>
        <dl>
            <dt>22</dt>
            <dd>内容2</dd>
        </dl>
        <dl>
            <dt>33</dt>
            <dd>内容3</dd>
        </dl>
    </div>

js部分

<script>
        // getElementsByTagName() 通过标签名称查找元素 查找dl标签
        var dlElement = document.getElementsByTagName('dl');
        // 遍历数组
        for(var j = 0; j < dlElement.length; j++) {
            // 给函数命名
            (function(i) {
                // 通过dl下标为0的最后一个子元素的点击事件 lastElementChild 最后一个元素节点
                dlElement[j].firstElementChild.onclick = function() {
                    // console.log(1);
                    // 调用dl下标为零的的最后一个子元素的类名
                    var a = dlElement[i].lastElementChild.className;
                    // 调用dl的下标为零的最后一个子元素的   contains 包含
                    var flag = dlElement[i].lastElementChild.classList.contains('block');
                    // 判断语句 调用下标为零的最后一个子元素包含block
                    // if else 是判断语句
                    if(flag) {
                        // 下标为零的最后一个子元素的类名 = none
                        dlElement[i].lastElementChild.className = 'none';
                    }
                    else {
                        // 遍历数组
                        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

这样一个简单的点击标题出现下拉框事件就完成啦！
希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！