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

如何添加窗口事件来关闭打开的导航下拉菜单,但保持切换导航项目的打开/关闭导航下拉行为?

要实现如何添加窗口事件来关闭打开的导航下拉菜单,但保持切换导航项目的打开/关闭导航下拉行为,可以通过以下步骤来实现:

  1. 首先,为导航菜单中的每个项目添加一个点击事件监听器。当点击某个导航项目时,触发该事件。
  2. 在事件处理程序中,首先检查当前点击的导航项目是否已经处于打开状态。如果是,则关闭该导航下拉菜单。
  3. 接下来,判断当前点击的导航项目是否与之前点击的导航项目相同。如果是,则说明用户希望切换导航项目,而不是关闭下拉菜单。在这种情况下,保持导航下拉菜单的打开状态。
  4. 如果当前点击的导航项目与之前点击的导航项目不同,则关闭之前点击的导航下拉菜单,并打开当前点击的导航下拉菜单。

以下是一个示例代码片段,展示了如何使用JavaScript实现上述功能:

代码语言:txt
复制
// 获取导航菜单中的所有项目
const navItems = document.querySelectorAll('.nav-item');

// 保存当前打开的导航下拉菜单
let openMenu = null;

// 为每个导航项目添加点击事件监听器
navItems.forEach(navItem => {
  navItem.addEventListener('click', () => {
    // 检查当前导航项目是否已经处于打开状态
    const isOpen = navItem.classList.contains('open');

    // 关闭之前打开的导航下拉菜单
    if (openMenu) {
      openMenu.classList.remove('open');
    }

    // 判断是否切换导航项目
    if (openMenu !== navItem || !isOpen) {
      // 打开当前点击的导航下拉菜单
      navItem.classList.add('open');
      openMenu = navItem;
    }
  });
});

// 添加窗口事件监听器,用于关闭导航下拉菜单
window.addEventListener('click', (event) => {
  // 检查点击事件是否发生在导航菜单之外
  if (!event.target.closest('.nav-menu')) {
    // 关闭当前打开的导航下拉菜单
    if (openMenu) {
      openMenu.classList.remove('open');
      openMenu = null;
    }
  }
});

这段代码假设导航菜单的HTML结构类似于以下示例:

代码语言:txt
复制
<nav class="nav-menu">
  <ul>
    <li class="nav-item">导航项目1</li>
    <li class="nav-item">导航项目2</li>
    <li class="nav-item">导航项目3</li>
  </ul>
</nav>

请注意,这只是一个示例实现,具体的实现方式可能因项目需求和技术栈而有所不同。在实际开发中,您可以根据具体情况进行调整和优化。

关于云计算、IT互联网领域的名词词汇,可以参考腾讯云的文档和产品介绍页面,例如:

  • 云计算:云计算是一种通过互联网提供计算资源和服务的模式。它可以提供灵活的计算能力、存储空间和应用程序服务,以满足不同规模和需求的用户。了解更多:腾讯云-云计算
  • 前端开发:前端开发是指开发网页或移动应用的用户界面部分。它涉及使用HTML、CSS和JavaScript等技术来创建和优化用户界面。了解更多:腾讯云-Web应用服务
  • 后端开发:后端开发是指开发网站或应用程序的服务器端部分。它涉及处理数据、逻辑和安全等方面的任务。了解更多:腾讯云-云服务器
  • 软件测试:软件测试是指通过执行测试用例来评估软件质量和功能的过程。它可以帮助发现和修复潜在的问题和错误。了解更多:腾讯云-云测试
  • 数据库:数据库是用于存储和管理数据的系统。它提供了一种结构化的方式来组织和访问数据。了解更多:腾讯云-云数据库
  • 服务器运维:服务器运维是指管理和维护服务器硬件和软件的任务。它包括监控服务器性能、处理故障和进行安全管理等方面。了解更多:腾讯云-云服务器
  • 云原生:云原生是一种构建和运行在云环境中的应用程序的方法。它强调容器化、微服务架构和自动化管理等特性。了解更多:腾讯云-容器服务
  • 网络通信:网络通信是指在计算机网络中传输数据和信息的过程。它涉及协议、路由和传输等方面的技术。了解更多:腾讯云-云联网
  • 网络安全:网络安全是保护计算机网络和系统免受未经授权访问、损坏或攻击的过程。它包括防火墙、加密和身份验证等安全措施。了解更多:腾讯云-云安全
  • 音视频:音视频是指音频和视频的传输和处理。它涉及编解码、流媒体和实时通信等技术。了解更多:腾讯云-音视频服务
  • 多媒体处理:多媒体处理是指对音频、视频和图像等多媒体数据进行编辑、转码和处理的过程。它可以包括剪辑、滤镜和特效等操作。了解更多:腾讯云-云点播
  • 人工智能:人工智能是指使计算机系统具备类似人类智能的能力。它涉及机器学习、自然语言处理和计算机视觉等技术。了解更多:腾讯云-人工智能
  • 物联网:物联网是指通过互联网连接和交互的物理设备和传感器网络。它可以实现设备之间的通信和数据交换。了解更多:腾讯云-物联网
  • 移动开发:移动开发是指开发移动应用程序的过程。它涉及使用移动开发框架和工具来创建适用于移动设备的应用程序。了解更多:腾讯云-移动开发
  • 存储:存储是指在计算机系统中保存和保留数据的过程。它可以包括本地存储、云存储和分布式存储等形式。了解更多:腾讯云-云存储
  • 区块链:区块链是一种分布式账本技术,用于记录和验证交易。它可以提供去中心化、安全和可追溯的交易记录。了解更多:腾讯云-区块链
  • 元宇宙:元宇宙是指虚拟现实和增强现实等技术构建的虚拟世界。它可以模拟现实世界,并提供交互和沉浸式体验。了解更多:腾讯云-元宇宙
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Java 进阶篇】深入了解 Bootstrap 插件

易于定制:尽管 Bootstrap 提供了默认样式和组件,您可以轻松自定义它们,以满足特定项目的需求。...这些插件可以用于添加轮播、模态框、下拉菜单、标签页、表单验证等功能,而无需编写复杂自定义 JavaScript 代码。 Bootstrap 插件目标是使前端开发更加容易,并且保持一致性。...这个基本模态框结构包含了打开模态框按钮、模态框标题、内容和操作按钮。用户可以点击关闭按钮或模态框外部关闭模态框。 自定义模态框 模态框可以根据不同设计需求进行自定义。...class="btn btn-primary dropdown-toggle":这是按钮样式类,它将按钮样式定义为 Bootstrap 按钮样式,并且带有下拉菜单切换行为。...在前面的示例中,我们使用了 data-toggle 和其他属性定义插件行为这些行为通常需要 JavaScript 支持。

24830

【Java 进阶篇】深入了解 Bootstrap 组件

class="navbar-toggler-icon":这是 Bootstrap 提供按钮图标,用于切换导航展开和折叠状态。 class="navbar-nav":这是导航导航容器。...-- 导航栏内容 --> 这些样式可以根据您设计需求选择,以使导航栏与您网站或应用程序一致。 下拉菜单 下拉菜单导航栏中常见交互元素,它们允许用户访问更多选项。...以下是一个示例,展示如何导航栏中创建下拉菜单: 在这个示例中,我们创建了一个带有下拉菜单导航。...用户可以点击 “下拉菜单” 链接以显示下拉选项。 标签页 标签页是一种常见导航元素,用于切换不同页面或内容。Bootstrap 提供了标签页组件,使您可以轻松创建标签页导航

20520
  • BootStrap应用开发学习入门1

    是用不可视方式给元素加label aria-labelledby #如果被描述元素存在真实描述元素,可使用它作为绑定描述元素和被描述元素来代替 按钮下拉菜单 描述: 分割按钮左边是原始功能,右边是显示下拉菜单切换...导航元素 描述:进行首页导航菜单进行设置,导航菜单与下拉菜单使用相似的语法; 默认情况下,列表项锚与一些数据属性协同合作触发带有 .dropdown-menu class无序列表。...WeiyiGeek. 3.下拉菜单(Dropdown) 使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单 基础用法: (1)通过 data...属性:向链接或按钮添加 data-toggle="dropdown" 切换下拉菜单,如下所示: <a data-toggle="dropdown"...语法: (1)通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素锁定和移动。

    44.8K21

    BootStrap应用开发学习入门1

    .dropdown-menu-right 下拉菜单右对齐 .dropdown-header 向下拉菜单标签区域添加标题提示 .disabled 下拉菜单禁用项 .divider 下拉菜单分割线...是用不可视方式给元素加label aria-labelledby #如果被描述元素存在真实描述元素,可使用它作为绑定描述元素和被描述元素来代替 按钮下拉菜单 描述: 分割按钮左边是原始功能,右边是显示下拉菜单切换...导航元素 描述:进行首页导航菜单进行设置,导航菜单与下拉菜单使用相似的语法; 默认情况下,列表项锚与一些数据属性协同合作触发带有 .dropdown-menu class无序列表。...、按钮等)添加下拉菜单 基础用法: (1)通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 切换下拉菜单,如下所示: ...语法: (1)通过 data 属性:如需向元素添加附加导航(Affix)行为,只需要向需要监听元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素锁定和移动。

    44.3K30

    Visual Studio 2008 每日提示(十三)

    #122、使用Ctrl+Tab打开IDE导航,获得鸟瞰视图,同时在Visual Studio中导航到所有打开文件和工具窗体 原文链接:use Ctrl+Tab to bring up the IDE...IDE导航窗口,按住Ctrl键,同时用方向键或鼠标选中一个文件或工具窗体激活。...同时你可以看见打开文件路径和预览图 评论: 这个导航非常有用,特别是打开文件较多情况下。...Menu 操作步骤: 菜单:按“Ctrl+Alt+Down”显示“文件下拉菜单”,可以通过上下方向键选择文件打开文件 文件下拉菜单支持输入首字符匹配滚动,即输入文件名会自动在下拉列表中匹配选中。...评论: 你也许会发现在#124中也有关闭文件,那个功能没这个不同,这个可以根据自己选择关闭

    2K80

    Flutter TolyUI 框架#06 | 下拉菜单设计

    下拉菜单是一个非常非常重要视图元件,它会将很多交互事件 收敛 到一块浮层区域。通过某些手势交互,比如点击、移入、右键等展开菜单浮层,参与交互。...导航目的 导航目的在于:对 布局空间 拓展,以较小区域驱动更大操作空间。比如侧栏导航一个菜单项,可以驱动右侧大区域内容变化。...是一种 中量级 导航交互。 路由浮层:以 Navigator、Router 为代表,会在某个区域推入新界面浮层,完全替换或者遮挡下方视觉元件,需要主动关闭退出。是一种 重量级 导航交互。...悬浮与点击触发模式 如下效果是 TolyDropMenu 基本使用方式: 左侧案例通过悬浮展开下拉菜单,鼠标移出时会关闭菜单,移入到浮层中时会取消关闭。...右侧案例通过点击事件展开下拉菜单,点击外部区域可关闭菜单。 通过 TolyDropMenu 组件,以 child 为目标展开下拉菜单,其中通过 hoverConfig 可以配置悬浮时打开菜单。

    22400

    后台系统设计(上篇:选择)

    四、 Switch 切换开关 用于打开关闭二元操作切换选项。 外观 常规: ? 带文本或图标: ? 最佳用法 ·左/灰为关,右/彩为开。...·下拉菜单选项按照某种逻辑顺序排序。例如,按照重要程度或被选择程度(可能性)进行排列。 ·对于大多数操作,当单击菜单或以外区域,菜单应该收起关闭;如果点击菜单项是多选操作,则菜单应保持打开状态。...·禁用菜单项,而不是隐藏,以提高功能可发现性。 ·下拉菜单文本保持简洁扼要,文本内容限制为单行。 ·请根据具体情况,定义列表项最小和最大宽度,以适应其内容。...·在多选情况下,由于是多选操作,我们将搜索框放在下拉菜单内,这样就不影响原有框体承载选项问题。 ? 但是该模式极大复杂了控件及用户交互行为。...同样我们还需要考虑在该检索关键字下,会产生用户想要多个结果吗? 例如添加公司人员,通过关键字检索,基本是锁定单一人员,所以通过关键字检索进行多选概率较低,自然可采用如下方案: ?

    9.7K21

    测试用例(功能用例)——完整demo(一千多条测试用例)

    (来自资产类别字典中“已启用”状态记录),默认为“请选择”; 供应商:必填,从下拉菜单中选择供应商(来自供应商字典中“已启用”状态记录),默认为“请选择”; 品牌:必填,从下拉菜单中选择品牌(来自品牌字典中...”),修改时从下拉菜单中选择品牌(来自品牌字典中“已启用”状态记录); 取得方式:必填,带入原值(若原取得方式已禁用,则显示“请选择”),修改时从下拉菜单中选择取得方式(来自取得方式字典中“已启用”...资产报废登记:(注意,必填使用红色星号“*”标注) 在资产报废列表页,点击【报废登记】按钮,打开“资产报废登记”窗口; 资产名称:必填,默认为“请选择”,在下拉列表中进行选择(不能选择“已报废”状态资产...),默认为空 添加资产:点击【添加】按钮,弹出“添加盘点资产”窗口,显示所有未添加至当前盘点单并且资产状态为“正常”资产;当列表记录超过10条时,列表显示翻页功能;点击【关闭关闭窗口回到新增盘点单页面...;在“添加盘点资产”窗口,系统支持按照“资产类别”、“资产编码/名称”(模糊查询)进行查询;系统支持批量添加,选择若干记录或全选,点击【批量添加】,系统将关闭窗口,回到新增盘点单页面,显示已添加盘点资产

    6.2K31

    深入理解bootstrap

    ,比如使用类似于data-target自定义属性等 2.JavaScrtip实现步骤:所有的插件都遵循jQuery插件开发标准步骤,所有的事件保持了统一标准 3.插件调用方法:所有插件使用方式都非常类似...font-face特性 B.下拉菜单 C.按钮组 1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用 .btn-group样式即可 2.按扭工具栏,在多个分组外再放一个大容器元素...D.按扭下拉菜单 1.利用data-toggle=""实现下拉菜单 2.样式.dropup向上下拉菜单 E.输入框组 1.输入框组,.input-group样式,输入框前后显示个性元素上可以使用...、hidden.bs.modal C.下拉菜单 1.一般在导航条(navbar)和选项卡(tab)上实现 2.首先navbar父容器上要应用.navbar样式,其次顶级ul块上要应用.nav和.navbar-nav...样式 3.使用规则: 菜单样式和菜单项保持一致 被单击链接或者按扭上需要应用data-toggle="dropdown" 4.js用法:$('#id').dropdown();,也包含事件订阅等功能,

    3.4K60

    Selenium Python使用技巧(二)

    对于任何测试自动化Selenium脚本,最基本必不可少技巧之一是实现如何在不关闭整个浏览器情况下关闭选项卡。...如果需要保持浏览器窗口打开(并退出所有其他选项卡),则可以使用switch_to.window()方法,该方法输入参数为window handle-id。 注:还有其他方法可以解决此问题。...因此,send_keys()方法不是可取,因为输出会根据WebDriver版本而有所不同。 在下面的示例中,我们打开一个包含测试URL窗口,然后关闭其他窗口。...(driver.window_handles[0]) driver.get("https://www.***.com") time.sleep(5) # 关闭窗口 #driver.close() 处理下拉菜单...我们使用find_element_by_xpath()方法定位该元素,并且一旦找到该元素(使用ID),便从下拉菜单中选择该值。

    6.4K30

    Jump Start Bootstrap 第4章

    我们将会看到如何添加下拉菜单导航栏、切换按钮状态、当点击按钮时漂亮警告信息会在显示一段时间后消失等等功能。...下拉插件默认状态是关闭;然而你刷新页面后它将切换状态并使菜单可见。...在这里,请求是打开关闭下拉菜单。 让我展示一个如何使用这些事件例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时状态。 <!...在这种情况下,您可以在show.bs.dropdown事件中向服务器发出Ajax请求,并在显示之前填充下拉菜单。...它是一个插入多个垂直堆叠标签插件,同一时间只能打开一个标签。 在Bootstrap中,通过将多个面板组件组合在一个容器中创建Collapse。我们在最近一章看到了如何创建一个面板。

    28.3K40

    最新iOS设计规范五|3大界面要素:控件(Controls)

    两种类型选择器都使人们可以通过选择单值或多值轻松输入信息。 ? 选项为中长列表时,可以考虑使用选择器。如果需要显示太短选项列表,请考虑使用下拉菜单而不是选择器。...九、下拉菜单(Pull-Down Menus) 在iOS 14及更高版本中(微信右上角下拉菜单其实出现更早),按钮可以显示一个下拉菜单,其中列出了人们可以选择项目或动作。...您可以使用下拉菜单(以下简称菜单)提供与按钮操作直接相关项目,或提供在当前上下文中有用操作列表。 与操作表、上下文菜单和弹出菜单相比,菜单提供了多个优势。...根据设计风格,自定义开关在其关闭打开背景颜色,可以使开关在APP中体验更好。 仅在列表中使用开关。开关用在列表中,例如可以打开关闭设置列表。...如果你需要工具栏或导航栏中使用类似功能,请改用按钮,并提供两个不同图标传达不同状态。 避免在开关中添加说明标签。关于开关打开关闭,用户是很明确

    8.6K30

    【Unity3D】3D 视图操作 ( 视图基本元素 | 导航器 | 栅格 | 天空盒 | 3D 视图操作 | 视图旋转 | 视图缩放 | 视图平移 | 导航器操作 | 恢复方向 | 顶、右、前视图 )

    ; 点击 Scene 窗口 按钮 , 可以 显示 | 隐藏 栅格 Grid ; 在 Scene 场景窗口 工具栏 最后侧 , 有个下拉菜单 , 点击该按钮 , 可以在弹出设置中...Skybox " , 用于设置游戏世界背景 , 一般设置天空或者星空 ; 点击 按钮 , 可以 设置 打开 | 关闭 天空盒 , 下图是关闭天空盒样式 , 上图是打开天空盒样式 ;...+ 鼠标左键 " 点击 导航器 中间 方块恢复 导航器 方向 , 可以使 y 轴向上 ; 2、顶视图 点击 导航 y 轴 , 也就是 绿色圆锥 可以切换到 顶视图 查看 游戏场景 ;...顶视图如下图所示 : 3、右视图 点击 导航 x 轴 , 也就是 红色圆锥 可以切换到 右视图 查看 游戏场景 ; 右视图如下图所示 : 4、前视图 点击 导航 z 轴 , 也就是...蓝色圆锥 可以切换到 前视图 查看 游戏场景 ; 前视图如下图所示 :

    1.5K30

    Android Studio 3.2新功能特性

    导航编辑器 新导航编辑器与Android Jetpack导航组件集成,为创建应用导航结构提供图形视图。导航编辑器简化了应用内目的地之间导航设计和实现。...通过从主菜单中选择Run > Profile部署应用程序后,通过单击+并从下拉菜单中选择一个应用程序进程启动一个新会话 。...当您 录制方法跟踪或 捕获堆转储时,IDE会将该数据(连同您应用网络活动)作为单独条目添加到当前会话中,并且您可以轻松地在录制之间来回切换以比较数据。要停止向当前会话添加数据,请单击stop。...在记录CPU活动后导出轨迹,请执行以下操作: 右键单击要从CPU时间轴导出录像。 从下拉菜单中选择Export trace。 导航至要保存文件位置,然后单击保存。...如果您项目中已 包含C / C ++代码和库,请通过从主菜单中选择View > Tool Windows > Projec并从下拉菜单中选择Android,打开IDE左侧项目窗口

    5.4K10

    【Java 进阶篇】深入了解 Bootstrap 表格和菜单

    Bootstrap 提供了多种菜单组件,如导航栏、下拉菜单和标签页,以满足不同导航需求。 Bootstrap 导航基本结构 导航栏是网页顶部常见导航元素,通常包含网站标志、链接和其他导航。...-- 导航栏内容 --> 这些样式可以根据您设计需求选择,以使导航栏与您网站或应用程序一致。 下拉菜单 下拉菜单导航栏中常见交互元素,它们允许用户访问更多选项。... 在这个示例中,我们创建了一个带有下拉菜单导航。...用户可以点击 “下拉菜单” 链接以显示下拉选项。 标签页 标签页是一种常见导航元素,用于切换不同页面或内容。Bootstrap 提供了标签页组件,使您可以轻松创建标签页导航。...以下是一些示例,展示如何自定义表格和菜单: 自定义表格样式 您可以通过添加自定义CSS样式改变表格外观。例如,您可以更改表格背景颜色、字体样式和边框。

    25730

    C# WPF MVVM开发框架Caliburn.Micro Screens, Conductors 和 Composition⑦

    通过添加这一难题,我们还可以解决停用与关闭问题。屏幕集合中任何内容都保持打开状态,一次只有其中一处于活动状态。...在像VS这样MDI风格应用程序中,导体将管理在ScreenCollection成员之间切换活动屏幕。打开一个新文档会将其添加到屏幕集合并切换到活动屏幕。...BindableCollection–通过继承标准ObservableCollection并添加INotifyPropertyChangedEx指定其他行为实现IObservableCollection...这允许通过接口以强类型方式(基于导体所执行项目)处理导体。导体将停用和关闭视为同义词。由于导线不保持“屏幕收集”,每个新项目的激活都会导致先前激活项目的停用和关闭。...自定义策略 本示例最酷特性之一可能是如何控制应用程序关闭。由于IShell继承了IGuardClose,因此在引导程序中,我们只需覆盖启动并连接Silverlight窗口

    2.6K20

    【愚公系列】2023年11月 Winform控件专题 MenuStrip控件详解

    开发人员可以使用Winform控件构建用户界面并响应用户操作行为,从而创建功能强大桌面应用程序。...它是一个容器控件,可以在其上添加MenuStripItem子控件,每个子控件可以表示一个菜单项或下拉菜单。...然后在MenuStrip控件上右键,选择“添加”即可添加子控件,可以选择菜单项、下拉菜单等。...对于MenuStrip控件事件处理,可以通过在设计器中双击相应子控件添加事件处理方法,或者在代码中使用事件处理程序来处理相应事件。...(object sender, EventArgs e){ // 处理下拉菜单项点击事件}// 添加菜单项和下拉菜单项private void Form1_Load(){ // 添加菜单项

    51211

    【Java 进阶篇】深入理解 Bootstrap 导航条与分页条

    易于定制:虽然 Bootstrap 提供了默认样式和组件,您可以轻松定制它们,以满足特定项目的需求。...class="navbar-toggler-icon":这是 Bootstrap 提供按钮图标,用于在小屏幕上切换导航可见性。 class="navbar-nav":这是导航导航容器。...-- 导航条内容 --> 这些样式可以根据您设计需求选择,以使导航条与您网站或应用程序一致。 下拉菜单 下拉菜单导航条中常见交互元素,它们允许用户访问更多选项。....dropdown 类创建下拉菜单。...点击链接 “下拉菜单” 将显示下拉菜单选项。这是一种很好方式组织和呈现导航选项。 Bootstrap 分页条 分页条是用于分页显示大量内容常见组件。

    24820

    02-微信小程序目录结构及配置

    微信小程序目录结构说明微信目录结构配置说明app.json 配置window配置restartStrategytabBar配置创建一个自己页面真机调试微信目录结构了解微信小程序项目的目录以及一些文件用途在小程序中...主体文件,由三个文件组成,必须放在项目的根目录,如下:app.js 作用:小程序逻辑 必填app.json 作用:小程序公共设置 必填app.wxss 作用:小程序公共样式表 非 必填页面由四个文件组成...(多端场景) 相关文档window配置可以借助UE编辑器随便找个颜色window用于设置小程序状态栏、导航条、标题、窗口背景色。...是否开启全局下拉刷新。...tab 应用(客户端窗口底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置 指定 tab 栏表现,以及 tab 切换时显示对应页面。

    58610

    关于状态可见原则

    应用 下拉菜单下拉菜单激活方式引起一个思考点,我们常见下拉菜单有两种激方式,hover 激活 和 click 激活。 但从外观上是无法进行区分,也就是没有操作前暗示。...由此带来问题是用户在操作前无法确定要以什么方式激活菜单,只能先试着尝试某一种。如果系统中同时存在不同激活方式下拉菜单,这种尝试就更加让人烦恼了。...应对方案除了整个系统统一之外,有没有其他方案呢?从操作前暗示角度入手,能不能通过三角箭头不同样式区分呢?...侧边导航 除了下拉菜单,在左侧导航菜单上也发现同样问题,当导航菜单收起之后,『是否存在二级菜单』这个信息就丢失了。...默认当前窗口打开时,用户可以通过鼠标右键菜单决定链接打开方式,也可以通过浏览器快捷键(如Chrome 键盘快捷键)进行控制;而如果默认为新窗口打开,则无法支持切换为在当前窗口打开链接。

    2.4K30
    领券