写一段可折叠展开的左侧菜单导航栏代码，含折叠展开箭头变化，主菜单1包含子菜单3579，主菜单2包含2468，子菜单显示在相应主菜单下方

好的，以下是一段基于HTML、CSS和JavaScript的可折叠展开的左侧菜单导航栏代码，包含两个主菜单和对应的子菜单，并且带有折叠展开箭头变化：

HTML代码：

<div class="sidebar">
  <ul class="main-menu">
    <li class="menu-item" data-submenu="submenu1">
      <span>主菜单1</span>
      <span class="arrow">▼</span>
    </li>
    <ul class="sub-menu" id="submenu1">
      <li>子菜单3</li>
      <li>子菜单5</li>
      <li>子菜单7</li>
      <li>子菜单9</li>
    </ul>
    <li class="menu-item" data-submenu="submenu2">
      <span>主菜单2</span>
      <span class="arrow">▼</span>
    </li>
    <ul class="sub-menu" id="submenu2">
      <li>子菜单2</li>
      <li>子菜单4</li>
      <li>子菜单6</li>
      <li>子菜单8</li>
    </ul>
  </ul>
</div>

CSS代码：

.sidebar {
  width: 200px;
  height: 100%;
  background-color: #e6e6e6;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  z-index: 999;
}

.main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.arrow {
  margin-left: auto;
  font-size: 12px;
}

.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.sub-menu li {
  display: block;
  padding: 10px;
}

.sub-menu li:hover {
  background-color: #cccccc;
}

.open .arrow {
  transform: rotate(180deg);
}

JavaScript代码：

let menuItems = document.querySelectorAll('.menu-item');
menuItems.forEach(function(item) {
  item.addEventListener('click', function() {
    let submenu = document.getElementById(item.dataset.submenu);
    if (submenu.style.display === 'none') {
      submenu.style.display = 'block';
      item.classList.add('open');
    } else {
      submenu.style.display = 'none';
      item.classList.remove('open');
    }
  });
});

这段代码实现了一个左侧菜单导航栏，包含两个主菜单和对应的子菜单，并且带有折叠展开箭头变化。点击主菜单项时，对应的子菜单会根据当前的显示状态进行切换，同时箭头的方向也会根据子菜单的显示状态进行变化。其中，CSS代码中的 `.open .arrow` 选择器实现了箭头的旋转效果，JavaScript代码中的 `item.classList.add('open')` 和 `item.classList.remove('open')` 则实现了对菜单项的样式修改。