11. (简答题) 利用javascript制作一个折叠菜单，判断左侧是否是显示状态，如果显示让其隐藏，如果不显示，让其显示；有按钮的动作，可以使用H5的页面布局，要求贴图及代码截图上传。

// 获取所有一级菜单元素
var m_span = document.getElementsByClassName('one');

// 定义一个上次打开的元素
var lastOpen = null;

// 为每个一级菜单绑定点击事件
for (var i = 0; i < m_span.length; i++) {
  m_span[i].addEventListener('click', function () {
    var current = this.nextElementSibling;

    // 如果当前菜单已展开，则折叠
    if (current.style.height === current.scrollHeight + 'px') {
      current.style.height = '0px';
      if (lastOpen === this) {
        lastOpen = null;
      }
    } else {
      // 折叠其他已展开的菜单
      if (lastOpen !== null) {
        lastOpen.nextElementSibling.style.height = '0px';
      }

      // 展开当前菜单
      current.style.height = current.scrollHeight + 'px';
      lastOpen = this;
    }
  });
}

CSS 样式

• 设置面板初始状态：通过 CSS 设置 .sub_close 类初始高度为 41px，隐藏多余内容。
• 动画效果：使用 CSS transition 属性平滑过渡面板高度变化。67