开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用vanilla Javascript单击下一个/上一个同级时显示/隐藏子菜单

使用vanilla Javascript单击下一个/上一个同级时显示/隐藏子菜单可以通过以下步骤实现：

首先，为每个父级菜单项添加一个点击事件监听器。
在点击事件处理程序中，获取当前点击的菜单项的下一个/上一个同级元素。
检查下一个/上一个同级元素是否是子菜单。
如果是子菜单，则切换其显示/隐藏状态。
如果不是子菜单，则继续查找下一个/上一个同级元素，直到找到子菜单或遍历完所有同级元素。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Menu Example</title>
  <style>
    .submenu {
      display: none;
    }
  </style>
</head>
<body>
  <ul>
    <li class="menu-item">
      Item 1
      <ul class="submenu">
        <li>Subitem 1</li>
        <li>Subitem 2</li>
      </ul>
    </li>
    <li class="menu-item">
      Item 2
      <ul class="submenu">
        <li>Subitem 3</li>
        <li>Subitem 4</li>
      </ul>
    </li>
    <li class="menu-item">
      Item 3
      <ul class="submenu">
        <li>Subitem 5</li>
        <li>Subitem 6</li>
      </ul>
    </li>
  </ul>

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

    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        const submenu = item.querySelector('.submenu');
        if (submenu) {
          submenu.style.display = (submenu.style.display === 'none') ? 'block' : 'none';
        }
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们使用了一个包含三个菜单项的简单菜单。每个菜单项都有一个子菜单，初始状态下子菜单是隐藏的。通过点击菜单项，可以切换子菜单的显示/隐藏状态。

这个示例中使用了纯粹的JavaScript（vanilla Javascript）来实现功能，没有依赖任何框架或库。通过querySelectorAll方法获取所有的菜单项，并为每个菜单项添加了点击事件监听器。在点击事件处理程序中，我们使用querySelector方法获取菜单项的子菜单，并通过修改其display属性来切换显示/隐藏状态。

这个示例中没有提及具体的腾讯云产品，因为这个功能与云计算平台无关，是前端开发中的一个常见需求。如果你需要在腾讯云上部署前端应用，可以考虑使用腾讯云的对象存储（COS）来存储静态资源，腾讯云CDN来加速访问，腾讯云云函数（SCF）来实现无服务器部署等。具体的产品介绍和文档可以在腾讯云官网上找到。

相关搜索:使用JavaScript / CSS在单击时显示/隐藏工具提示使用按钮在Javascript上隐藏和显示字段集在第一次单击时不起作用/如何在单击时更改按钮标题如何使用纯javascript显示和隐藏多个下拉菜单并通过单击外部来关闭无法在移动设备上隐藏子菜单并在单击时显示它需要使用Vanilla Javascript隐藏/显示子菜单 linux安全组端口 linux查当前网速 linux中的dll linux无bc命令 linuxhls搭建

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jquery入门

运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world 隐藏显示/隐藏状态切换...">卷帘显示/隐藏状态切换透明度显示透明度隐藏... 透明度显示/隐藏状态切换切换到指定的透明度...next:选择下一个同级元素 prev:选择上一个同级元素 sibings:选择所有的同级元素

2.9K2 0

windows10切换快捷键_Word快捷键大全

Delete 无需先将选定项移动到“回收站”，直接将其删除向右键打开右侧的下一个菜单，或者打开子菜单向左键打开左侧的下一个菜单，或者关闭子菜单 Esc 停止或退出当前任务 Windows徽标键快捷键...Win + D 显示和隐藏桌面 Win + Alt + D 显示和隐藏桌面上的日期和时间 Win + E 打开“文件资源管理器” Win + F 打开“反馈中心” Win + G 打开游戏栏（当游戏处于打开状态时...查看上一个文件夹 Backspace 查看上一个文件夹向右键显示当前选项（如果它处于折叠状态），或者选择第一个子文件夹向左键折叠当前选项（如果它处于展开状态），或者选择其父文件夹 End 显示活动窗口的底端...+ 单击某个任务栏按钮打开某个应用，或快速打开应用的另一个实例 Ctrl + Shift + 单击某个任务栏按钮以管理员身份打开应用 Shift + 右键单击某个任务栏按钮显示该应用的窗口菜单...Caps Lock + Ctrl + 向右键转到下一个同级（仅当应用提供结构导航时） Caps Lock + Ctrl + 向左键转到上一个同级（仅当应用提供结构导航时） Caps Lock +

5.3K1 0

Windows中的键盘快捷方式大全

Delete 无需先将选定项移动到“回收站”，直接将其删除向右键打开右侧的下一个菜单，或者打开子菜单向左键打开左侧的下一个菜单，或者关闭子菜单 Esc 停止或退出当前任务 Windows 徽标键键盘快捷方式...Delete 无需先将选定项移动到“回收站”，直接将其删除向右键打开右侧的下一个菜单，或者打开子菜单向左键打开左侧的下一个菜单，或者关闭子菜单 Esc 停止或退出当前任务 Windows 徽标键键盘快捷方式...+ 单击某个任务栏按钮以管理员身份打开应用 Shift + 右键单击某个任务栏按钮显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务栏按钮显示该组的窗口菜单 Ctrl + 单击某个已分组的任务栏按钮...执行菜单命令（或其他带下划线的命令） F10 激活活动程序中的菜单栏右箭头打开右侧的下一个菜单，或者打开子菜单左箭头打开左侧的下一个菜单，或者关闭子菜单 F5（或 Ctrl + R）刷新活动窗口...+ 向左键查看上一个文件夹 Backspace 查看上一个文件夹右箭头显示当前部分（如已折叠），或者选择第一个子文件夹 Alt + 向右键查看下一个文件夹 Alt + 向上键查看父文件夹 Ctrl

5.6K2 0

如何制作自己的原生 JavaScript 路由

当你想到路由时，通常会想到类似 React 之类的库。但实际上，这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢？...最重要的是，使用 vanilla JS router 可以减少你对框架的依赖。只要你了解实现它所涉及的所有部分，就可以相对容易的在原生 JavaScript 中创建自己的路由。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...使“后退”和“前进”按钮起作用通过使用 history.pushState，你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。这样做会产生 popstate事件。...（第一次是我们单击按钮时。）但是由于该事件带有单击的 id，因此单击 Back 或 Forward 时很容易刷新视图并重新加载内容。

3.8K2 0

Windows快捷键速查

Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换。 Alt + Shift + 箭头键当组或磁贴的焦点放在“开始”菜单上时，可将其朝指定方向移动。...向右键打开右侧的下一个菜单，或打开子菜单。向左键打开左侧的下一个菜单，或关闭子菜单。 Esc 停止或离开当前任务。 PrtScn 捕获整个屏幕的屏幕截图并将其复制到剪贴板。 2....Shift + 右键单击任务栏按钮显示应用的窗口菜单。 Shift + 右键单击分组任务栏按钮显示组的窗口菜单。 Ctrl + 单击分组任务栏按钮循环浏览组的窗口。 3....Windows 徽标键 + Shift + C 打开超级按钮菜单。 Windows 徽标键 + D 显示和隐藏桌面。 Windows 徽标键 + Alt + D 显示和隐藏桌面上的日期和时间。...Alt + 向右键查看下一个文件夹。 Alt + 向上键查看该文件夹所在的文件夹。 Alt + 向左键查看上一个文件夹。 Backspace 查看上一个文件夹。

4.2K2 0

Win10 快捷键大全（史上最全）「建议收藏」

Ctrl + 向左键将光标移动到上一个字词的起始处 Ctrl + 向下键将光标移动到下一个段落的起始处 Ctrl + 向上键将光标移动到上一个段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间切换...Delete 无需先将选定项移动到“回收站”，直接将其删除向右键打开右侧的下一个菜单，或者打开子菜单向左键打开左侧的下一个菜单，或者关闭子菜单 Esc 停止或退出当前任务 Windows 徽标键键盘快捷方式...查看上一个文件夹 Backspace 查看上一个文件夹向右键显示当前选项（如果它处于折叠状态），或者选择第一个子文件夹向左键折叠当前选项（如果它处于展开状态），或者选择其父文件夹 End 显示活动窗口的底端...+ 右键单击某个任务栏按钮显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务栏按钮显示该组的窗口菜单 Ctrl + 单击某个已分组的任务栏按钮循环切换该组的窗口设置键盘快捷方式按此键...播放或暂停视频箭头键（在集锦中）向上、向下、向左或向右滚动左箭头或右箭头键（位于单个项目或幻灯片放映上）显示下一个或上一个项目箭头键（位于缩放的照片上）在照片内移动 Ctrl + 加号或减号

15.9K3 0

Windows10中的键盘快捷方式

按 Shift 与任何箭头键在窗口中或桌面上选择多个项目，或在文档中选择文本 Shift + Delete 删除选定项，无需先移动到回收站向右键打开右侧的下一个菜单，或打开子菜单向左键打开左侧的下一个菜单...Windows 徽标键 + Shift + C 打开超级按钮菜单 Windows 徽标键 + D 显示和隐藏桌面 Windows 徽标键 + Alt + D 显示和隐藏桌面上的日期和时间 Windows...Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌面上的日期和时间Windows 徽标键 +...向左键查看上一个文件夹 Backspace 查看上一个文件夹向右键显示当前选择内容（如果已折叠），或选择第一个子文件夹向左键折叠当前所选内容（如果已展开），或选择该文件夹所在的文件夹 End...显示应用的窗口菜单 Shift + 右键单击分组任务栏按钮显示组窗口菜单 Ctrl + 单击分组任务栏按钮循环浏览组窗口本文删改自豆末的WINDOWS中的键盘快捷方式相关

4.5K2 0

最全Excel 快捷键总结，告别鼠标！

在已拆分（通过依次单击“视图”菜单、“管理此窗口”、“冻结窗格”、“拆分窗口”命令来进行拆分）的工作表中，在窗格和功能区区域之间切换时，按 F6 可包括已拆分的窗格。...当功能区处于选中状态时，按向左键或向右键可选择左边或右边的选项卡。当子菜单处于打开或选中状态时，按这些箭头键可在主菜单和子菜单之间切换。当功能区选项卡处于选中状态时，按这些键可导航选项卡按钮。...当菜单或子菜单处于打开状态时，按向下键或向上键可选择下一个或上一个命令。当功能区选项卡处于选中状态时，按这些键可向上或向下导航选项卡组。...当 Scroll Lock 处于开启状态时，移到窗口左上角的单元格。当菜单或子菜单处于可见状态时，选择菜单上的第一个命令。按 Ctrl+Home 可移到工作表的开头。...当菜单或子菜单处于可见状态时，End 也可选择菜单上的最后一个命令。按 Ctrl+End 可移至工作表上的最后一个单元格，即所使用的最下面一行与所使用的最右边一列的交汇单元格。

7.2K6 0

JavaWeb18-jquery学习笔记（Java全栈开发）

:从下一个兄弟开始,直到指定元素结束 parent():获取父元素 parents():匹配元素的祖先元素的元素(不包含根元素) prev():上一个兄弟 prevAll():前面的所有兄弟 prevUntil...当显示成功后触发fn hide() 隐藏 toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...滑动：改变高度 slideDown ，显示（从上往下） slideUp，隐藏（从下往上） slideToggle() 切换淡入淡出：改变透明度 fadeIn 显示 fadeOut 隐藏 fadeToggle...切换 fadeTo 指定对象透明度效果: 基本:宽和高都变 show([毫秒值],[fn]) 展示 hide([毫秒值],[fn]) 隐藏 toggle([毫秒值],[fn]) 切换显示效果若显示则隐藏...-- 导入js库，注意：使用src属性之后，标签体中不能写入内容--> <script type="text/<em>javascript</em>" src="..

6.8K9 0

MindManager2022序列号密钥解压安装程序教程

使用标注来凸显主题。 ⑥ Ctrl+Shift+K添加链接。创建指向网页、图片、电子邮件地址、程序或MindManager文档或主题的链接。这些链接将显示为主题中的可单击图标。可以添加多个主题链接。...将文件附加到主题，附加的文件将储存于文档内部，并在主题中以可单击图标显示。 ⑧ Ctrl+T将便笺附加到主题。在便笺窗口中键入文本，或添加图片和表格。 ⑨ Ctrl+Shift+B添加边界。...三、导航 ① 方向键：选择上方，下方，左侧或右侧的主题（地图） ② 方向键：沿箭头方向（上下左右）微调至所选主题（流程图） ③ Tab/Shift+Tab选择下一个主题/上一个主题 ④ Home 移至同级主题顶部...（同级主题） ⑦ Ctrl+Shift+V 粘贴为备注 ⑧ Delete 删除主题或对象 ⑨ Ctrl+Shift+Delete 删除选定的主题（但保留子主题）七、导图级别和过滤 ① F3 专注于主题...② Ctrl+D 显示下一个主题 ③ Alt + Shift + 1 显示一级 ④ Alt + Shift + 2 显示二级 ⑤ Alt + Shift + 3…9 显示三到九级 ⑥ Alt + Shift

8.6K1 0

Jquery实现可拖拽的树菜单「建议收藏」

$(UlNodeId).slideUp(“fast”); } } //触发器实现节点的隐藏与显示... setting.fileClass = “ico_docu”; //2.最后子节点时显示文件图标 ...setting.isRootNode); $(“#treeDemo”).append(TreeView); //3.事件模块【Event】 //单击隐藏与显示列表...a标签Dragging //实现思想：1.单击标签时将追加至 2....不然鼠标移上节点又显示原来拖拽时的样式【移动后(移除)再移上鼠标不能显示样式bug NOTDO】 $(“a”).unbind(“mouseover”).unbind

4.4K3 0

前端中那些让你头疼的英文单词

（下拉菜单功能嵌套option使用） table 表格（tr行 td单元格 th表头）普通语义： b加粗 i倾斜 u下划线 s删除线强调语义： strong 加粗 em倾斜 ins下划线 del...删除线下面这些都有上下左右四个属性： border 边框 padding 内边距 margin 外边距 overflow 内容溢出后会怎么样（visible默认值溢出显示，hidden溢出隐藏，auto...） onmouseover鼠标滑过 onmouseout 鼠标离开上面的内容如果哪一个单词忘记了具体的用法，可以点击链接查看具体内容：JavaScript入门 ---- for和while都是循环时使用...子级的 addClass 添加类 removeClass删除类 hover 鼠标滑过 eq 找下标 animate 自定义动画函数 slideUp 隐藏（向上滑，就是把东西收起来，就隐藏了） slideDown...显示（向下滑，向下展开，就显示了） slideToggle 一会显示一会隐藏 stop 停止（清除动画机制，在形成动画函数之前加stop） fadeIn 淡入 fadeOut 淡出 fadeToggle

2.3K2 0

《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark

单击子菜单项之一将直接打开相应的捕获文件。 Merge…（合并）此菜单项使您可以将捕获文件合并到当前加载的文件中。...首选项：单击它时，将打开一个提示窗口，您可以在其中控制 GUI 的外观、设置捕获选项和其他高级功能，如添加 RSA 密钥、修改协议设置等。此子菜单也可用于自定义我们的配置文件。...“下一个数据包”和“上一个数据包”按钮可用于导航屏幕上的显示数据，当然，您可以简单地使用“Ctrl + 上/下”按钮或鼠标滚动来更轻松地进行遍历。...scanf() 下一个数据包 scanf()Ctrl+scanf()↓ 移至列表中的下一个数据包。即使数据包列表没有键盘焦点，也可以使用它移动到上一个数据包。...scanf() 会话中的下一个数据包 scanf()Ctrl+scanf()。移至当前对话中的下一个数据包。即使数据包列表没有键盘焦点，也可以使用它移动到上一个数据包。

1.2K3 0

win8快捷键大全分享，非常全

Ctrl+向左键将光标移动到上一个字词的起始处 Ctrl+向下键将光标移动到下一个段落的起始处 Ctrl+向上键将光标移动到上一个段落的起始处 Ctrl+Shift 加某个箭头键选择一块文本...打开右侧的下一个菜单或者打开子菜单向左键打开左侧的下一个菜单或者关闭子菜单 F5（或 Ctrl+R）刷新活动窗口 Alt+向上键在 Windows 资源管理器中查看上一级文件夹 Esc 取消当前任务...+向左键查看上一个文件夹 Backspace 查看上一个文件夹向右键显示当前选项（如果它处于折叠状态），或者选择第一个子文件夹 Alt+向右键查看下一个文件夹 Alt+向上键查看父文件夹 Ctrl...Shift 并右键单击某个任务栏按钮显示该程序的窗口菜单按住 Shift 并右键单击某个分组的任务栏按钮显示该组的窗口菜单按住 Ctrl 并单击某个分组的任务栏按钮循环切换该组的窗口在放大镜中的快捷键...Ctrl+G 显示或隐藏网格线 F10 或 Alt 显示快捷键提示 Shift+F10 显示当前快捷菜单 F1 打开“画图”帮助在写字板中的快捷键 Ctrl+N 新建一个文档 Ctrl+O 打开一个现有文档

3.5K4 0

Visual Studio 2008 每日提示(十九)

，从右键菜单选择“显示错误帮助”项此命令会启动外部帮助浏览器，并定位具体的错误评论：我想没人怀疑微软的msdn文档的价值，恐怕在这点上没那家公司出其右。...，按“Ctrl+下箭头”向下一个控件组移动。...#190、显示所有隐藏的控件原文链接:You can do a “show all” to find your “hiding” toolbox controls 操作步骤：工具箱默认不会显示所有的控件...，显示的控件是适用当前活动的编辑器的控件，无法当前活动编辑器使用的控件是默认隐藏的。...如果想把隐藏的控件都显示出来。右键单击工具箱，在右键菜单选中“全部显示”项。不过，不适用当前活动编辑的控件将显示不可用。评论：对于新增的控件，这个操作有必要。

1.8K5 0

移除jQuery好像也没那么难

// jQuery // 返回 .box 的下一个、上一个和父元素 $(".box").next(); $(".box").prev(); $(".box").parent(); // JavaScript...// 返回 .box 的下一个、上一个和父元素 var box = document.querySelector(".box"); box.nextElementSibling; box.previousElementSibling...// jQuery // 隐藏和显示元素 $(".box").hide(); $(".box").show(); // JavaScript // 通过将 "display" 更改为 "none" 和..."block" 来隐藏和显示元素 document.querySelector(".box").style.display = "none"; document.querySelector(".box...使用 appendChild 向 DOM 中添加元素本文译自：https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/

401 0

IntelliJ IDEA 快捷键大全 Win 版

），显示文档内容 Ctrl + U 前往当前光标所在的方法的父类的方法 / 接口定义（必备） Ctrl + B 进入光标所在的方法/变量的接口或是定义处，等效于 Ctrl + 左键单击（必备） Ctrl...Ctrl + F1 在光标所在的错误代码处显示错误信息（必备） Ctrl + F3 调转到所选中的词的下一个引用位置（必备） Ctrl + F4 关闭当前编辑文件 Ctrl + F8 在 Debug...光标跳转到当前单词 / 中文句的右侧开头位置（必备） Ctrl + 前方向键等效于鼠标滚轮向前效果（必备） Ctrl + 后方向键等效于鼠标滚轮向后效果（必备）二、Alt 快捷键 Alt + 显示版本控制常用操作菜单弹出层...，比如 Debug 窗口中有 Output、Debugger 等子视图，用此快捷键就可以在子视图中切换（必备） Alt + 右方向键按切换当前已打开的窗口中的子视图，比如 Debug 窗口中有 Output...+ F2 跳转到上一个高亮错误或警告位置 Shift + F3 在查找模式下，查找匹配上一个 Shift + F4 对当前打开的文件，使用新 Windows 窗口打开，旧窗口保留 Shift +

1.1K3 0

XMind 快捷键完整命令

Alt+PageUp Alt+PageUp 上一个子标签 Alt+Shift+?...Ctrl+7 Command+7 切换至下一个视图 Ctrl+8 Command+8 切换至下一个透视图 Ctrl+10 Command+10 显示视图菜单 Ctrl+H Command+H 修改超链接...Insert Insert 插入子主题 Delete Delete 删除快捷键（Windows）描述 + 展开当前分支 – 收缩当前分支 * 展开所有分支 / 收缩所有分支 Alt± 显示系统菜单...Alt+PageUp 上一个子标签 Alt+Shift+?...Ctrl+7 切换至下一个视图 Ctrl+8 切换至下一个透视图 Ctrl+10 显示视图菜单 Ctrl+H 修改超链接 Ctrl+Home 返回中心主题 Ctrl+I 插入图片/倾斜 Ctrl+Insert

1.5K1 0

IDEA快捷键

跳到下个查找的文件 Ctrl + Alt + 右括号（]）在打开多个项目的情况下，切换下一个项目窗口 Ctrl + Alt + 左括号（[）在打开多个项目的情况下，切换上一个项目窗口 Ctrl +...Command + Shift + H 显示方法层次结构 Control + Option + H 显示调用层次结构 F2 / Shift + F2 跳转到下一个/上一个突出错误或警告的位置 F4 /...+ 左键单击 Ctrl + / Command + / 注释光标所在行代码，会根据当前不同文件类型使用不同的注释符号 Ctrl + F1 Command + F1 在光标所在的错误代码处显示错误信息...强烈注意：此快捷键跟光标所在位置有着很严重关联关系，光标放的位置不同，使用此快捷键出来的菜单选项完全不一样。...可以从几个思路：Java 类、JSP、HTML、JavaScript、CSS、SQL 等文件类型下面演示的各个功能是基于：IntelliJ IDEA 2016.1.1，如果你使用早期版本，可能不一定有对应的功能

1.1K4 2

intellij idea常用快捷键

+ 左键单击（必备） Ctrl + K 版本控制提交项目，需要此项目有加入到版本控制才可用 Ctrl + T 版本控制更新项目，需要此项目有加入到版本控制才可用 Ctrl + H 显示当前类的层次结构.../ 中文句的右侧开头位置（必备） Ctrl + 前方向键等效于鼠标滚轮向前效果（必备） Ctrl + 后方向键等效于鼠标滚轮向后效果（必备） Alt 快捷键介绍 Alt + `|显示版本控制常用操作菜单弹出层...，比如Debug窗口中有Output、Debugger等子视图，用此快捷键就可以在子视图中切换（必备） Alt + 右方向键按切换当前已打开的窗口中的子视图，比如Debug窗口中有Output、Debugger...+ F2 跳转到上一个高亮错误或警告位置 Shift + F3 在查找模式下，查找匹配上一个 Shift + F4 对当前打开的文件，使用新Windows窗口打开，旧窗口保留 Shift +...，跳到下个查找的文件 Ctrl + Alt + 右括号（]）在打开多个项目的情况下，切换下一个项目窗口 Ctrl + Alt + 左括号（[）在打开多个项目的情况下，切换上一个项目窗口 Ctrl

4612 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭