如何从代码隐藏中展开子菜单

<ul class="menu">
  <li class="menu-item" data-submenu="submenu1">主菜单1
    <ul class="submenu" id="submenu1">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li class="menu-item" data-submenu="submenu2">主菜单2
    <ul class="submenu" id="submenu2">
      <li>子菜单4</li>
      <li>子菜单5</li>
      <li>子菜单6</li>
    </ul>
  </li>
</ul>

.submenu {
  display: none;
}

const menuItems = document.querySelectorAll('.menu-item');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    const submenuId = this.getAttribute('data-submenu');
    const submenu = document.getElementById(submenuId);
    
    if (submenu.style.display === 'none') {
      submenu.style.display = 'block';
    } else {
      submenu.style.display = 'none';
    }
  });
});