实现功能和步骤及相关知识点
a. 首先 实现动画过程函数createAnimation(options){ }（当使用时要注意其用法）
- 我们将会设置 from( 起始值) , to（结束值） , totalMS （变化总时间）, duration（动画间隔时间） , times（变化总次数） , dis（ 每一次变化改变的值） ,curTime（当前变化的次数）
- 使用在指定的时间间隔内重复执行某个函数或代码块的函数setInterval({}, )
- 在setInterval 函数中将会单独考虑变化次数达到时的情况： 将起始值设置成结束值 清除结束重复函数
function createAnimation(options) {
var from = options.from; // 起始值
var to = options.to; // 结束值
var totalMS = options.totalMS || 1000; // 变化总时间
var duration = options.duration || 15; // 动画间隔时间
var times = Math.floor(totalMS / duration); // 变化的次数
var dis = (to - from) / times; // 每一次变化改变的值
var curTimes = 0; // 当前变化的次数
var timerId = setInterval(function () {
from += dis;
curTimes++; // 当前变化增加一次
if (curTimes >= times) {
// 变化的次数达到了
from = to; // 变化完成了
clearInterval(timerId); // 不再变化了
options.onend && options.onend();
}
// 无数的可能性
options.onmove && options.onmove(from);
}, duration);
}
知识点：
- options.onmove && options.onmove(from);
这是一个条件语句，用于检查 options 对象是否有 onmove 属性，以及该属性是否为一个函数。如果这两个条件都满足，那么就会调用 onmove 函数，并将 from 作为参数传递给它。
- onend onmove
onend 和 onmove 都是 JavaScript 中的事件处理函数，通常用于处理与动画或用户交互相关的事件。
onend 事件处理函数通常在动画或过渡效果结束时执行。例如，当一个元素的 CSS 过渡效果结束时，可以使用 onend 事件处理函数来触发其他操作。在使用某些 JavaScript 动画库时，也经常会使用 onend 事件处理函数来在动画结束时触发其他操作。
onmove 事件处理函数通常用于处理与用户交互相关的事件，例如鼠标移动或触摸事件。例如，当用户在页面上拖动一个元素时，可以使用 onmove 事件处理函数来更新元素的位置，并实时反馈给用户。在某些 JavaScript 库中，也可以使用 onmove 事件处理函数来实现拖放功能。
需要注意的是，onend 和 onmove 只是事件处理函数的名称，它们不是 JavaScript 中内置的属性或方法。通常，我们需要为元素或对象添加这些事件处理函数，以便在事件发生时执行相应的操作。
- options.onmove && options.onmove(from);
这是一个条件语句，用于检查 options 对象是否有 onmove 属性，以及该属性是否为一个函数。如果这两个条件都满足，那么就会调用 onmove 函数，并将 from 作为参数传递给它。
具体来说，options.onmove 表示从 options 对象中获取 onmove 属性。&& 是逻辑与运算符，如果前面的条件为真，则继续执行后面的语句，否则直接返回前面的结果。所以，如果 options 对象中有 onmove 属性，且该属性为函数类型，那么 options.onmove && options.onmove(from) 这条语句就会执行，否则就会被跳过。
b. 获得每个需要展开的元素（其元素有个兄弟元素为我们需要展开的内容），设置相关值，并对每个元素设置onclick事件
c. 设置打开子菜单元素
- 使用createAnimation函数 但注意使用其函数是有注意事项的 必须是在子菜单关闭的状态下设置其函数
所以我们应该最先去新建给子菜单一个属性var status = subMenu.getAttribute('status'); 其状态有opened ,closed ,playing
- 如果状态不是关闭则啥也不干 继续以下操作
- 在将状态改为playing
- 开始设置动画函数（有相应注意事项
d. 关闭子菜单函数与打开函数有异曲同工之妙
e. 设置子菜单切换函数 （主要是确保打开其它子菜单时 已打开的子菜单关闭 页面只有一个子菜单打开）
- 得到子菜单的状态
- 若子菜单没有处于正在播放动画状态 则继续以下操作
- 若子菜单状态为打开 关闭其子菜单
- 若子菜单状态为为关闭，则 打开子菜单
f. 全局细节化
在给每个菜单设置的onclick事件里面
- 找到其已经打开的兄弟元素 相对应的子菜单 并对其关闭子菜单
- 切换子菜单
注意切换的不是this 而是this的下一个兄弟元素
知识点：
- this.nextElementSibling
this.nextElementSibling 是 JavaScript 中的 DOM 元素属性，表示当前元素的下一个兄弟元素节点
我的易错点：
- 实现动画过程函数createAnimation(options){ }:
options.onmove && options.onmove(from);
options.onend && options.onend();缺一不可
- 在关闭 打开子菜单元素中 设置的动画函数中切忌省略他们onmove onend属性
onmove: function (n) {
subMenu.style.height = n + 'px';
},
onend: function () {
subMenu.setAttribute('status', 'opened');
},
