JS实现淘宝支付宝网站的控制台菜单效果

实现淘宝、支付宝网站的控制台菜单效果，需要使用HTML、CSS和JavaScript来实现。

HTML部分

首先在HTML中创建一个模拟控制台界面的框架，其中包含一个侧边栏菜单和一个主界面区域，在侧边栏菜单中新建一个ul列表，用于放置菜单项：

<div class="console">
  <div class="console-sidebar">
    <ul>
      <li class="menu-item">菜单项1</li>
      <li class="menu-item">菜单项2</li>
      <li class="menu-item">菜单项3</li>
    </ul>
  </div>
  <div class="console-main">
    <!--主界面区域-->
  </div>
</div>

CSS部分

在CSS中设置控制台的样式，其中包括侧边栏菜单的样式和菜单项的样式。此处以菜单项样式为例：

.menu-item {
  cursor: pointer;
  color: #ccc;
  padding: 10px;
  border-bottom: 1px solid #333;
  transition: all .2s;
}

.menu-item:hover {
  color: #fff;
  background-color: #333;
}

JavaScript部分

在JavaScript中，定义一个函数来处理菜单项的点击事件：

function onMenuItemClick(event) {
  // 取消所有菜单项的选中状态
  var menuItems = document.querySelectorAll('.menu-item');
  menuItems.forEach(function(menuItem) {
    menuItem.classList.remove('menu-item-selected');
  });
  // 获取当前点击的菜单项对象
  var menuItem = event.target;
  // 添加选中样式
  menuItem.classList.add('menu-item-selected');
  // 在主界面区域显示相关内容
  var mainContent = document.querySelector('.console-main');
  mainContent.innerHTML = menuItem.textContent;
}

在函数中，首先取消所有菜单项的选中状态，然后获取当前点击的菜单项对象，添加选中样式，最后在主界面区域显示相关内容。

绑定菜单项的点击事件：

var menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(menuItem) {
  menuItem.addEventListener('click', onMenuItemClick);
});

通过查询选择器获取所有菜单项元素，然后将处理函数绑定到每个菜单项的点击事件上。

下面是两个实例说明：

示例一：添加子菜单

在HTML中，将菜单项嵌套ul子列表作为子菜单项，并设置一个展开和关闭子菜单的按钮：

<li class="menu-item-has-children">菜单项1
  <button class="menu-item-switch">+</button>
  <ul class="sub-menu">
    <li class="menu-item">子菜单项1</li>
    <li class="menu-item">子菜单项2</li>
    <li class="menu-item">子菜单项3</li>
  </ul>
</li>

在CSS中为子菜单的样式加入了折叠效果：

.sub-menu {
  display: none;
}

.menu-item-has-children .menu-item-switch {
  margin-left: 10px;
  padding: 0 5px;
}
.menu-item-has-children .menu-item-switch:before {
  content: '+';
}
.menu-item-has-children.opened .menu-item-switch:before {
  content: '-';
}

.opened .sub-menu {
  display: block;
}

在JavaScript中添加打开和关闭子菜单的功能：

function onMenuItemSwitchClick(event) {
  var menuItem = event.target.parentNode;
  menuItem.classList.toggle('opened');
}
var menuItemSwitches = document.querySelectorAll('.menu-item-switch');
menuItemSwitches.forEach(function(menuItemSwitch) {
  menuItemSwitch.addEventListener('click', onMenuItemSwitchClick);
});

打开和关闭子菜单的方法就是通过打开或关闭对应的列表元素，并将其添加或移除opened样式。因此在绑定事件时，要获取所有的switch按钮元素，然后将其点击事件绑定到处理函数上。