点击#verticalMenu时子菜单.submenus显示/隐藏失效及toggle报错问题

我有如下垂直菜单代码：

<li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a>
    <ul style="display:none" class="submenus">
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li> 

为.submenus设置了display:none，并编写如下JavaScript代码，试图在用户点击Menu item时显示子菜单：

$(document).on('click','#verticalMenu',function(){
    let sbm = document.querySelector(".submenus");
    sbm.style.display = "block";
});

但子菜单无法正常显示（已确认点击事件能成功触发）。尝试用sbm.toggle()切换显示状态时，报错“toggle is not a function”。请问问题出在哪里？如何实现点击#verticalMenu时正确隐藏/显示.submenus子菜单？

1. 混用jQuery与原生DOM API的冲突：

   • 你用jQuery绑定了点击事件，但通过原生document.querySelector()获取DOM元素，toggle()是jQuery对象专属方法，原生DOM元素没有这个方法，因此调用会报错。
   • 如果页面存在多个.submenus元素，document.querySelector(".submenus")只会匹配第一个，无法精准定位当前点击菜单下的子菜单。

2. 子菜单未显示的核心原因：

   • 若页面有多个.submenus，你操作的可能不是当前菜单对应的子菜单；
   • 可能存在CSS优先级问题，其他样式覆盖了style.display = "block"的设置。

方案1：纯jQuery实现（简洁高效） #

利用jQuery的选择器和内置方法，精准定位当前点击元素下的子菜单，直接切换显示状态：

$(document).on('click','#verticalMenu',function(){
    // 定位当前点击li下的.submenus子元素
    $(this).find(".submenus").toggle();
});

• $(this)指向当前被点击的#verticalMenu元素，find(".submenus")确保只操作当前菜单下的子菜单；
• toggle()方法自动切换元素的显示/隐藏状态，无需手动判断display值。

方案2：原生JavaScript实现 #

如果不想依赖jQuery，用原生API实现切换逻辑：

document.getElementById('verticalMenu').addEventListener('click', function(){
    // 获取当前元素下的.submenus
    const sbm = this.querySelector(".submenus");
    // 根据当前显示状态切换display值
    sbm.style.display = sbm.style.display === 'block' ? 'none' : 'block';
});

• this.querySelector(".submenus")确保获取的是当前点击菜单对应的子菜单；
• 通过判断当前display属性值，手动实现显示/隐藏的切换效果。

额外优化：阻止a标签默认行为 #

如果点击Menu item的a标签时出现页面跳转（即使href为空），可以在事件处理函数中添加阻止默认行为的代码：

• jQuery版本：

  $(document).on('click','#verticalMenu',function(event){
      event.preventDefault();
      $(this).find(".submenus").toggle();
  });
  

• 原生JS版本：

  document.getElementById('verticalMenu').addEventListener('click', function(event){
      event.preventDefault();
      const sbm = this.querySelector(".submenus");
      sbm.style.display = sbm.style.display === 'block' ? 'none' : 'block';
  });
  

内容的提问来源于stack exchange，提问作者Pouya Vaghefi