怎样用js隐藏二级菜单栏

<ul class="menu">
  <li>菜单项1
    <ul class="submenu">
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li>菜单项2
    <ul class="submenu">
      <li>子菜单项3</li>
      <li>子菜单项4</li>
    </ul>
  </li>
</ul>

// 获取所有的一级菜单项
var menuItems = document.querySelectorAll('.menu > li');

// 遍历每个一级菜单项
menuItems.forEach(function(item) {
  // 为每个一级菜单项添加点击事件监听器
  item.addEventListener('click', function(event) {
    // 阻止事件冒泡，防止点击事件影响到其他元素
    event.stopPropagation();
    
    // 获取当前点击的一级菜单项下的二级菜单
    var submenu = this.querySelector('.submenu');
    
    // 切换二级菜单的显示状态
    if (submenu.style.display === 'block') {
      submenu.style.display = 'none';
    } else {
      submenu.style.display = 'block';
    }
  });
});

// 隐藏所有的二级菜单栏（初始状态）
document.querySelectorAll('.submenu').forEach(function(submenu) {
  submenu.style.display = 'none';
});