首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何删除单击其他链接时关闭子菜单的类

删除单击其他链接时关闭子菜单的类可以通过以下步骤实现:

  1. 首先,需要为子菜单添加一个类,用于标识该子菜单。
  2. 在HTML中,为每个链接添加一个点击事件监听器,当点击链接时执行相应的操作。
  3. 在点击事件监听器中,首先获取所有的子菜单元素。
  4. 遍历所有的子菜单元素,检查是否有打开的子菜单(即是否存在已添加的类)。
  5. 如果存在打开的子菜单,则移除该类,关闭子菜单。
  6. 最后,为当前点击的链接所对应的子菜单添加该类,以打开该子菜单。

以下是一个示例代码:

HTML:

代码语言:txt
复制
<ul>
  <li>
    <a href="#" class="menu-link">链接1</a>
    <ul class="submenu">
      <li><a href="#">子链接1</a></li>
      <li><a href="#">子链接2</a></li>
      <li><a href="#">子链接3</a></li>
    </ul>
  </li>
  <li>
    <a href="#" class="menu-link">链接2</a>
    <ul class="submenu">
      <li><a href="#">子链接4</a></li>
      <li><a href="#">子链接5</a></li>
      <li><a href="#">子链接6</a></li>
    </ul>
  </li>
</ul>

CSS:

代码语言:txt
复制
.submenu {
  display: none;
}

.submenu.open {
  display: block;
}

JavaScript:

代码语言:txt
复制
var menuLinks = document.querySelectorAll('.menu-link');

menuLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    
    var submenus = document.querySelectorAll('.submenu');
    
    submenus.forEach(function(submenu) {
      if (submenu.classList.contains('open')) {
        submenu.classList.remove('open');
      }
    });
    
    var submenu = link.nextElementSibling;
    submenu.classList.add('open');
  });
});

在上述示例中,我们为每个链接添加了一个名为"menu-link"的类,并为每个子菜单添加了一个名为"submenu"的类。通过JavaScript代码,我们为每个链接添加了一个点击事件监听器,当点击链接时执行相应的操作。在点击事件监听器中,我们首先获取所有的子菜单元素,然后遍历这些子菜单元素,检查是否有打开的子菜单。如果存在打开的子菜单,则移除该类,关闭子菜单。最后,为当前点击的链接所对应的子菜单添加该类,以打开该子菜单。

这样,当点击一个链接时,其他已打开的子菜单将会关闭,只有当前点击的链接所对应的子菜单会打开。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

空间校正相似变换

变换过程是针对某一要素所有要素统一执行,通常用于将以数字化仪单位创建数据转换成地图上所表示实际单位。 本练习将向您展示如何基于自己创建位移链接来应用变换。...在准备将已数字化或已导入到临时要素数据复制粘贴到自己数据库中,您可能需要使用此方法对这些数据进行校正。您还将了解如何指定要校正要素、预览校正和查看链接表。 空间校正以位移链接为基础。...2.单击空间校正 工具条上新建位移连接工具 ? 。 3.捕捉到源图层中“起点”以及目标图层中“终点”。 ? 4.按如下所示方式继续创建其他链接。...通过该菜单命令,您可以编辑链接坐标、为链接添加闪烁效果、缩放和平移所选链接,以及删除链接。如果此校正 RMS 误差超出可接受范围,您可以修改链接以提高精确度。...1.单击编辑器工具条上编辑器菜单,然后单击停止编辑。 2.单击是保存编辑内容。 3.教程使用完成后关闭 ArcMap。不需要保存地图文档。

1.2K20

xwiki功能-权限管理

在wiki级别权限 点击“wiki”菜单,然后点击“Administer Wiki”。如下面的截图,点击“Users & Groups”下“Rights”链接: ?...从XWiki 7.2M3开始,“Administer”链接位于抽屉菜单下,您可以通过点击右上角图标找到。 ? ? ? 下面是你如何更改权限: 选择您想要设置权限用户或组。...在一个复选框里,单击一次为允许,两次为拒绝,三次为清除(删除权限)。这里操作使用Ajax技术自动保存权限。...空间级别权限 点击“Space”菜单(位于顶部栏上),再单击“Administer Space”,然后单击“Rights”链接。...请注意,你还需要给未注册用户评论权限。完成操作后,匿名用户当进行评论,将看到以下界面: ?

1.3K20
  • 在Excel中自定义上下文菜单(上)

    Excel中上下文菜单 在Microsoft Excel中,人们最常用的上下文菜单是单元格上下文菜单,这是在工作表单元格或选定单元格上单击鼠标右键看到菜单(如下图1所示)。...然而,也可以自定义许多其他上下文菜单。例如,在行或列标题上单击鼠标右键显示行和列上下文菜单。...(保存)和菜单。...注意,如何添加标记到该控件,然后用其删除控件。单击按钮或菜单三个选项之一,会运行其他四个过程。在本例中,最后四个宏更改单元格中任何文本大小写。...当打开或激活该工作簿,这些事件会自动将控件添加到单元格上下文菜单中;当关闭或停用该工作簿,这些事件会自动删除添加控件。

    2.7K40

    FL Studio21最新中文版本全新功能详细介绍

    关闭此功能,则在撤消删除。·翻转铅笔按钮-将笔辅助按钮行为与主按钮交换。·备用撤消-安装在新计算机上,默认立即打开。...导出(Export)-打开目标文件夹,在系统文件浏览器中自动选择渲染文件。文件(菜单)File (menu)-有一个新“更多”菜单,最多显示50个最近项目。...多选(Multi-selection)-使用“剪辑菜单 > 切片选项支持多选。警告对话框(Warning dialog)-删除多个播放列表轨道弹出轨道名称,提醒您即将进行操作。...GUI-当主动添加链接(点击开始处理),“添加目标链接”(+) 按钮跳动。将自动化包络通道包络线网格划分更改为4。...将完整路径显示为筛选项提示定位文件(Locate file)-右键单击文件选项,在系统文件浏览器中突出显示标签(Tags)-可以(右键单击删除标签。

    3.7K20

    最新版水果FL Studio21新版本更新全解析!80项更新与改进!

    关闭此功能,则在撤消删除。·翻转铅笔按钮-将笔辅助按钮行为与主按钮交换。·备用撤消-安装在新计算机上,默认立即打开。...导出(Export)-打开目标文件夹,在系统文件浏览器中自动选择渲染文件。文件(菜单)File (menu)-有一个新“更多”菜单,最多显示50个最近项目。...多选(Multi-selection)-使用“剪辑菜单 > 切片选项支持多选。警告对话框(Warning dialog)-删除多个播放列表轨道弹出轨道名称,提醒您即将进行操作。...GUI-当主动添加链接(点击开始处理),“添加目标链接”(+) 按钮跳动。将自动化包络通道包络线网格划分更改为4。...将完整路径显示为筛选项提示定位文件(Locate file)-右键单击文件选项,在系统文件浏览器中突出显示标签(Tags)-可以(右键单击删除标签。

    3.4K30

    路径复制

    如果选择了多个文件和/或文件夹,则将它们各自路径复制到多行上。 路径复制将打开一个菜单。 ? 路径复制复制菜单 菜单包含更多命令。...对于每个命令,可以单击命令左侧以为其选择一个图标(1),并选择该命令是出现在主上下文菜单中还是出现在菜单中(或同时出现在这两个菜单中)(2)。 命令列表(3)右侧按钮可用于进一步操作命令。...New和Edit允许创建和编辑自定义命令,这些命令具有自己文档 分隔符在所选命令后添加一个分隔符。分隔符可用于在菜单中对命令进行逻辑分组。 删除删除所选自定义命令或分隔符。...启用此功能后,“路径复制复制”将定期(最多一周一次)检查网络上新版本。发布新版本关闭上下文菜单后将出现一个窗口,显示该新版本一些发行说明,并提供指向GitHub发行页面的链接。...每种元素类型都有其自己配置选项。有些元素不需要其他配置。 在管道元素列表上方,按钮(4)可用于向管道中添加元素或从管道中删除元素,移动管道中元素(因为它们按照显示顺序执行)或获得帮助这个网站。

    3.4K30

    FL Studio水果21最新中文版详细功能介绍

    常规设置 将未完成录制文件放入回收站 - 默认打开。 关闭后,它会在您撤消后立即删除。 反转铅笔按钮 - 交换笔辅助按钮和主按钮。 备用撤消 - 默认情况下打开以在新计算机上进行全新安装。...导出 - 打开目标文件夹,将在系统文件浏览器中自动选择呈现文件。 文件菜单 - 有一个新菜单,最多可显示 50 个最近使用项目。 文件支持 - 现在可以导入 Apple .m4a音频格式。...菜单 - 右键单击菜单现在具有显示淡入淡出编辑控件图标,用于快速访问淡入淡出选项。 捕捉功能 - 当淡入淡出手柄捕捉关闭,按住 Alt 键进行捕捉。 因此,Alt+单击不再重置淡入淡出。...拖放 — 拖放多个样本,按住 Shift 键按顺序将样本添加到播放列表中。 删除样本或克隆轨道,将选择该轨道。 多选 - 可以使用剪辑菜单→斩波选项进行多项选择。...GUI - 主动添加链接,添加目标链接 + 按钮会闪烁,单击它以启动该过程。 将自动化剪辑通道包络网格拆分更改为四个拆分。

    4.3K40

    水果编曲软件FLStudio最新21简体中文版本

    关闭此功能,则在撤消删除。 ·翻转铅笔按钮-将笔辅助按钮行为与主按钮交换。 ·备用撤消-安装在新计算机上,默认立即打开。...导出(Export)-打开目标文件夹,在系统文件浏览器中自动选择渲染文件。 文件(菜单)File (menu)-有一个新“更多”菜单,最多显示50个最近项目。...多选(Multi-selection)-使用“剪辑菜单 > 切片选项支持多选。 警告对话框(Warning dialog)-删除多个播放列表轨道弹出轨道名称,提醒您即将进行操作。...GUI-当主动添加链接(点击开始处理),“添加目标链接”(+) 按钮跳动。将自动化包络通道包络线网格划分更改为4。...将完整路径显示为筛选项提示 定位文件(Locate file)-右键单击文件选项,在系统文件浏览器中突出显示 标签(Tags)-可以(右键单击删除标签。

    2.7K00

    windows系统基础知识篇,这些你都会用吗?

    、卸载无用动态链接 五,删除资源管理器经常在内存中留下无用动态链接,为了消除这种现象,你可以打开注册表编辑器,设置键值:HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionxplorer...4.无法加密标记为“系统”属性文件,并且位于systemroot目录结构中文件也无法加密。   5.在加密文件夹,系统将询问是否要同时加密它文件夹。...如果选择是,那它文件夹也会被加密,以后所有添加进文件夹中文件和文件夹都将在添加自动加密。   二、解密文件或文件夹   步骤一:打开Windows资源管理器。   ...2.在对文件夹解密,系统将询问是否要同时将文件夹内所有文件和文件夹解密。如果选择仅解密文件夹,则在要解密文件夹中加密文件和文件夹仍保持加密。...步骤二:单击“开始→运行”,键入“mmc”,然后单击“确定”。   步骤三:在“控制台”菜单上,单击“添加/删除管理单元”,然后单击“添加”。

    1.9K30

    如何使用纯前端控件集 WijmoJS 中可视化在线设计器

    开始使用WijmoJS Designer 设计器可视化界面首次打开,该设计图面默认自带一个带有实时样本数据纯前端FlexGrid表格控件,要删除它,请单击“编辑”工具栏上删除”按钮。...设计器菜单默认为全部折叠,并显示为垂直条形图标。单击页面左上角WijmoJS徽标以展开菜单。...设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部任何位置(“编辑”工具栏下方区域)。...单击WijmoJS 徽标以关闭工具箱,单击主题以显示可用主题列表,然后单击其他值,例如Cerulean。...单击WijmoJS 徽标以关闭“主题”列表,然后单击“源视图”以显示生成HTML 和 Java。

    5.9K20

    python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例

    QMidArea和QMdiSubWindow常用方法 方法 描述 addSubWindow() 将一个小控件添加在MDI区域作为一个新窗口 removeSubWindow() 删除一个窗口小控件...() 关闭活动窗口 subWindowList() 返回MDI区域窗口列表 setWidget() 设置一个小控件作为QMdiSubWindow实例对象内部控件 QMdiArea多重文档界面代码实例...('Tiled') 当单击菜单控件触发triggered信号,连接到槽函数windowaction() file.triggered[QAction].connect(self.windowaction...) 当选择菜单NEw动作,会添加一个新Mdi,每个Mdi都有标题,在主窗口内部增加Mdi数量 #窗口增加一个 MainWindow.count=MainWindow.count...(sub) #窗口显示 sub.show() 当选择菜单Cascade和tiled动作,会在主窗口显示自窗口排序方式,级联显示或者平铺显示 if q.text(

    3.8K21

    AngularDart Material Design 菜单

    单击按钮时菜单会扩展,当选择项目或单击下拉菜单区域菜单关闭。 Inputs: ariaLabel String  按钮触发器Aria标签。...closeMenuOnClick bool  如果为true,则在菜单打开单击触发按钮将关闭材质菜单。 否则,在菜单已打开单击触发按钮将不会执行任何操作。...menu MenuModel  显示菜单。 popupClass String  要附加到菜单弹出窗口CSS。 这些CSS将被复制到弹出窗口叠加层中。...MaterialFabMenuComponent Selector: 带有可选菜单fab菜单项。...Inputs: menuItem MenuItem  MenuItem,用于定义此菜单外观和行为。 如果项目具有没有空项目组菜单,则会通过单击或悬停显示菜单

    2K20

    如何在 React 中点击显示或隐藏另一个组件?

    当用户单击菜单按钮菜单应该出现,然后当用户单击菜单外部菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...否则,菜单保持可见。我们还使用了 useEffect 钩子来添加和删除事件监听器。useEffect 钩子在组件挂载注册事件监听器,并在卸载删除它们,以避免内存泄漏。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框显示或隐藏。当用户单击打开模态框按钮,模态框应该出现;当用户单击关闭按钮或模态框之外,模态框应该消失。...如果用户单击元素不在模态对话框中,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。...当用户单击关闭按钮,我们将可见性设置为 false,模态对话框将被隐藏。小结在本文中,我们介绍了如何使用 React 来实现点击显示或隐藏另一个组件。

    4.9K10

    【机组】单元模块软件简介和安装

    双击“控制面板”中“添加或删除程序”图标。在弹出对话框中,选择LCPT选项,然后单击“添加或删除”按钮。接着按相应提示即可完成LCPT程序卸载。...在主菜单栏上有6个主菜单,它们分别如下: 1、文件(F) 和文件有关操作,如打开、关闭、打印等文件操作。...当新建或者打开新汇编源文件,软件会提示用户必须先关闭已打开源文件。...6 实验系统操作指南 实验主要分为两,一是基本模块实验,主要依靠实验平台完成,但可以通过调试监控实验进行,当每一步实验完成,请点击软件菜单“查看——刷新”,或点击工具栏,或用快捷键F5...不妨点击下方链接,一同探讨更多数字技术奇迹吧

    12310

    S7-200 smart做一个电机控制库

    操作步骤: 第一步:在文件菜单中,选择建立库命令;或者用鼠标右键单击指令树指令库分支,选择创建库 图2....要删除例程,请选择右侧例程,然后单击"删除"(Remove) 按钮。 不能直接添加中断例程;但如果子例程引用了中断例程,STEP 7 Micro/WIN SMART 会自动包含该中断例程。...在项目中使用库 注意:在项目中使用库,必须关闭从中创建库项目,然后打开一个新项目或其它项目以使用库。...库文件夹 第二步:关闭项目后重新打开软件即可看到指令树中库文件添加或者删除成功,删除库文件也用鼠标右键单击指令树指令库分支,选择刷新库,即可看到项目树中库文件夹该库删除。...常问问题 如何编制一个用户自定义库,使之像西门子库一样在调用时可以灵活分配库指令内存(V存储区)? 在编程,凡用到V存储区地址处都使用“符号寻址”,为每个变量指定一个符号。

    4.9K20

    Selenium Python使用技巧(二)

    'w') filename.write(source_code) filename.close() sleep(10) driver.close() 鼠标悬停 在某些情况下,您可能需要单击作为菜单一部分项目或作为多级菜单一部分项目...首先,我们找到菜单项,然后在所需菜单项上执行单击操作。 在下面的示例中,在导航到主页上“Automation”选项卡。第一个任务是Menu中找到某个元素 。...对于任何测试自动化Selenium脚本,最基本但必不可少技巧之一是实现如何在不关闭整个浏览器情况下关闭选项卡。...因此,send_keys()方法不是可取,因为输出会根据WebDriver版本而有所不同。 在下面的示例中,我们打开一个包含测试URL新窗口,然后关闭其他窗口。...它通过CSS Selector在该元素元素中找到元素列表。

    6.4K30

    【愚公系列】2023年10月 WPF控件专题 Expander控件详解

    一、Expander控件详解WPF中Expander控件是一个可折叠控件,可以用来显示或隐藏其控件。当用户单击Expander控件标题,其控件将会打开或关闭。...Expander控件属性和事件如下:属性:Header:Expander控件标题IsExpanded:控制控件打开或关闭状态事件:Expanded:当控件打开发生Collapsed:当控件关闭发生下面是一个...当用户单击控件标题控件将会打开或关闭,并显示或隐藏StackPanel中所有按钮。1.属性介绍WPF中Expander控件是一个可展开区域,通常用于显示或隐藏可选内容。...显示和隐藏菜单:Expander控件可以用来隐藏和显示具有菜单菜单项。当用户单击菜单,可以展开菜单,然后再次点击相同菜单项可以将其收起。...例如,展开一个选项卡Expander控件,可以关闭其他选项卡Expander控件,以便有更多空间去显示当前选项卡内容。窗口内面板控制:Expander控件可以用来控制窗口中面板。

    84631

    xwiki功能-文档生命周期

    新页面的内容(内容,对象和其他元数据)会从模板进行复制。当点击链接,如果有可用模板,你会被要求选择其中一个: image.png 然后,你将进入所选页面模板内联表单模式进行编辑。...当使用Flamingo皮肤查看代码,你必须点击更多操作菜单,然后单击查看源文件。 image.png image.png XML XWiki允许在XML中暴露页面。...Flamingo皮肤: image.png image.png 删除 删除页面并丢入回收站 image.png 在删除前会要求确认。你可以决定是否同时删除当前文档文档。...如果重命名页面(或其页面)有外部链接,他们重命名之后,地址将有可能会不可用,除非你选择“create an automatic redirect”来修复链接。 ?...限制 目前仍有重命名上一些限制: 反向链接必须开启(它们默认打开,但如果你已经把它们关闭,重命名操作将不会重命名反向链接) 位于XObject对象和翻译内容反向链接目前没办法重命名。

    1.2K20

    Windows 7 操作系统

    (6)睡眠:保存信息并关闭计算机,打开计算机时会恢复到睡眠前工作状态,睡眠,电脑只是进入一种低耗能状态。...单击左上角应用程序图标,会打开窗口中应用程序控制菜单,使用该菜单也可以实现最小化、最大化和关闭等功能。  拖动标题栏可以拖动窗口,还可以双击标题栏完成窗口最大化和还原切换。  ...在列表框中单击某个主题可以更改桌面背景、窗口颜色、声音和屏幕保护程序,也可以单击窗口底部相应链接进行上述设置。...5)设置屏幕保护程序  屏幕保护程序是指啊开机状态下载一段时间内没有使用鼠标或键盘操作,屏幕上出现动画或图案。屏幕保护程序可以起到保护信息安全,延长显示器寿命作用。...(2)单击“任务栏和[开始]菜单属性”对话框“[开始]菜单”选项卡,单击“自定义”按钮,可以自定义链接、图标和菜单在[开始]菜单外观和行为。

    37630
    领券