【小河今学 | JavaScript】原生JS折叠菜单效果

8.05 今天作业效果如下
要求：创建一个垂直菜单，默认显示第一个子菜单下的内容；当点击子菜单时，该子菜单下的内容下拉显示，其他子菜单下的内容隐藏。

首先布局，代码如下：

	<ul id="box">
        <li>
            <h3>HTML</h3>
            <p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等
                非文字元素。超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部分提供关于王爷的信息，“主体”部分提供王爷的具体内容
            </p>
        </li>
        <li>
            <h3>CSS</h3>
            <p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等
                非文字元素。超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部分提供关于王爷的信息，“主体”部分提供王爷的具体内容
            </p>
        </li>
        <li>
            <h3>JS</h3>
            <p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等
                非文字元素。超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部分提供关于王爷的信息，“主体”部分提供王爷的具体内容
            </p>
        </li>
        <li>
            <h3>VUE</h3>
            <p>超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等
                非文字元素。超文本标记语言的结构包括“头”部分和“主体”部分，其中“头”部分提供关于王爷的信息，“主体”部分提供王爷的具体内容
            </p>
        </li>
    </ul>

		* {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 250px;
            margin: 100px auto;
        }

        ul {
            border: 1px solid #999;
            list-style-type: none;
        }

        li h3 {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #999;
            cursor: pointer;
        }
        
        ul li:last-child h3 {
            border-bottom: none;
        }

        li p {
            padding: 10px;
            background-color: #eee;
            font-size: 14px;
            display: none;
            text-indent: 2em;
            text-align: left;
            border-bottom: 1px solid #999;
        }

        ul li:first-child p {
            display: block;
        }

        ul li:last-child p {
            border-top: 1px solid #999;
            border-bottom: none;
        }

接着是js部分，注释里都写的很清楚了，主要遇到的问题是for循环部分。在for循环里放了一个点击事件函数，一开始我写的是for(var i = 0; i < title.length; i++)怎么执行都不成功，控制台输出了一下发现每次i都输出为4。这里是因为使用var赋值时会先将整个for循环执行完后再执行里面的函数，因此当整个for循环执行完后i为4，那么我点击事件函数接收到的i就一直是4，所以没有办法执行。
后续将var改为let是用到了ES6中的闭包概念，这里我还没有学太清除，先简单记录一下后续学清楚了再修改。

	// 获取p标签，这是一个数组
    var text = document.getElementsByTagName('p');
    // 获取h3标签，这是一个数组
    var title = document.getElementsByTagName('h3');
    // 点击事件，当点击子菜单时，该子菜单下的内容下拉显示，其他子菜单下的内容隐藏。
    for(let i = 0; i < title.length; i++){
        title[i].onclick = function() {
            for(let j = 0; j < text.length; j++){
                if(i == j){
                    text[j].style.display = "block";
                }else{
                    text[j].style.display = "none";
                }
            }
        }
    }