手风琴效果

手风琴效果

分析：

• 鼠标移入要触发，鼠标移出要恢复
• 谁移入谁变大（宽度变大），其他的兄弟元素都变小

步骤：

• 找到所有的li
• 给每个li加鼠标移入事件

利用排他思想，先让大家宽度都变小，再让自己变大

• 给每个li加鼠标移出事件

恢复大家的默认宽度

  // 1. 找到所有的li
  let lis = document.querySelectorAll('li')
  // 2. 要每个li都加移入事件（遍历）
  for (let i = 0; i < lis.length; i++) {
    // 加移入事件
    lis[i].addEventListener('mouseenter', function () {
      // 又要来个遍历，遍历每个li，这样才能让每个li宽度变小
      for (let j = 0; j < lis.length; j++) {
        lis[j].style.width = '100px'
      }
      // 让自己变大（this）
      // 一共有5个，每个默认是240，现在每个改成了100
      // 一共减少了多少宽度？140 * 5 = 700
      // 为了保持整体的大盒子宽度不变，也就是原本大盒子是240*5= 1200
      // 要保证1200不变，那么就应该让自己变成 800
      // 原因：其他有4个，现在每个占100，就是一共占了400，那么1200-400 = 800
      // 也就是自己要占800才能保持大盒子不变
      this.style.width = '800px'
    })
    // 加移出事件
    lis[i].addEventListener('mouseleave', function () {
      // 让大家都恢复到240
      for (let j = 0; j < lis.length; j++) {
        lis[j].style.width = '240px'
      }
    })
  }