原生js实现的侧边栏展开收缩高度伸缩特效

使用方法

const container = document.querySelector('.container')
const target = document.querySelector('.aside button')

const modifiers = {
  expanded: 'with-long-aside',
  shrunk: 'without-long-aside'
}
let initial = true

const toggle = () => {
  container.classList.toggle(modifiers.expanded)
  if (!initial) {
    container.classList.toggle(modifiers.shrunk)
  }
  initial = false
}

const onKeyUp = (e) => {
  if (e.key === 'ArrowUp') {
    toggle()
  }
}

target.addEventListener('click', toggle)
window.addEventListener('keydown', onKeyUp)