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

在ESC上关闭Bootstrap 4下拉菜单

,可以通过以下步骤实现:

  1. 首先,在HTML文件中找到需要关闭的下拉菜单的触发元素,通常是一个按钮或链接,它具有data-toggle="dropdown"属性。
  2. 在该触发元素上添加一个自定义的data-esc-close属性,并将其设置为true。例如:data-esc-close="true"
  3. 在JavaScript文件中,使用以下代码监听ESC键的按下事件,并在按下ESC键时关闭下拉菜单:
代码语言:javascript
复制
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    var dropdowns = document.querySelectorAll('[data-esc-close="true"]');
    dropdowns.forEach(function(dropdown) {
      var menu = dropdown.nextElementSibling;
      if (menu.classList.contains('show')) {
        dropdown.click();
      }
    });
  }
});

以上代码会在ESC键按下时,遍历所有具有data-esc-close="true"属性的触发元素,检查其相邻的下拉菜单是否处于打开状态,如果是,则模拟点击触发元素以关闭下拉菜单。

这种方法可以确保在按下ESC键时关闭Bootstrap 4下拉菜单,提供更好的用户体验。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

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

相关·内容

为什么CSS Grid创建布局Bootstrap更好

CSS Grid是一种在网络创建布局的新方法。我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。...具体来说,是需要添加这个: 这可能是一些人支持Bootstrap的一个论点:尽可能简化网络的时候,你不必太担心CSS,而只需HTML中定义布局。...但是,正如下一个论点,元素和布局之间的耦合实际是一个弱点,特别是涉及到灵活性的时候。 布局更灵活 如果你想要根据屏幕的大小来改变布局,比如当在移动设备查看的时候,菜单移到最上面一行。...不再有12列限制 这谈不是一个严重的问题,但也经常对我造成困扰。因为Bootstrap的网格分为12列,如果想要5列布局,或者7列,9列,或任何不合计为12的列布局的时候,就非常不方便。...你可以想要多少网格就要多少网格,下面就是一个7列的网格: 通过设定为完成,如下所示: 现在确实已经有了破解Boostrap这个缺陷的方法,而且我也知道Bootstrap4也使用了Flexbox,但是仍然测试中

2.2K60
  • 菜鸟手册(4):Jetson NANO使用GPIO

    您可能已经考虑过打开或关闭灯光作为程序的输出,或者想要从外部按钮读取按下。这就是GPIO有用的地方! 本文中,我们将介绍如何通过打开和关闭发光二极管(LED)来控制GPIO输出。...话虽如此,请注意Jetson NanoGPIO扩展接头的电气特性与Raspberry Pi不同。特别是,Jetson NanoGPIO引脚上的流动电流远低于RPi。...一个5mm的LED,正极通常有一个较长的腿,而负极通常在灯泡的边缘有一个平坦的点。 ? 对于晶体管,集电极正极,发射极负极。引脚的排列取决于所选的特定零件。...我们将在Jetson的引脚2把红线连接到+5V,引脚6把黑线连接到GND,引脚12把晶体管基座连接到基极电阻。下面的演示示例选择Pin 12。 ?...结论 虽然打开和关闭LED似乎很多步骤,但我们现在有了通过Jetson GPIO header 控制外部设备的基础。

    10K11

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

    什么是 Bootstrap深入探讨 Bootstrap 插件之前,让我们简要了解一下 Bootstrap 是什么。...Bootstrap 的主要优势包括: 响应式设计:Bootstrap 可以轻松创建适应不同设备和屏幕尺寸的网页,确保用户各种设备都能够良好地浏览网站。...Bootstrap 表单验证 表单验证是一个重要的前端功能,用于确保用户提交表单时提供有效的数据。Bootstrap 提供了一些内置的表单验证类,可以帮助您轻松实现表单验证。...确保项目中包含 Bootstrap 的 JavaScript 文件,以便插件正常运行。...总结 本博客中,我们深入了解了 Bootstrap 插件,涵盖了轮播、模态框、下拉菜单、标签页和表单验证等常见插件。我们了解了它们的基本结构以及如何自定义它们以满足项目需求。

    23130

    教程| Angular 4 中加载功能模块(

    示例应用程序 4 个功能区域呈现不断更新的信息:Markets、Sports、Weather 和 Currency。除了为每个区域开发特性模块之外,还可以考虑和实现 3 种应用程序加载技术。...将 Angular4BaseModules 源文件(位于 Angular4TutorialSrc.zip 中)解压到一个空目录位置。我的目录名为 …/fm。 3....4. 运行命令 ng serve。 您会看到应用程序默认端口 4200 中成功运行,以及一条与此消息类似的消息: 图 1....图 4. 应用程序目录结构 您的应用程序目录中,打开文件 app.component.html。用户单击 Markets 链接时,应用程序会调用 /markets 路径。... Windows 机器,按下 Fn+F12。 Mac 机器,按下 Command->Option->i。现在您会看到 Chrome 开发人员工具 GUI。

    2.2K10

    Jump Start Bootstrap4

    Bootstrap 官网地址 原文出处 Bootstrap装饰插件 JavaScript是网页事实的脚本语言。...一章,导航栏只包含一个简单的链接列表。本节中,我们将使用一些Bootstrap的JavaScript插件帮助扩展我们网站现有组件的功能。...Bootstrap通过类”close”将按钮放置警告消息的右上角。关闭按钮的解除动作靠data-dismiss属性来触发,由Bootstrap使用JavaScript实现。...Bootstrap 3版本,modals已经变得有响应性;这意味着它们看起来很好,即使小屏幕也能运行良好。...当设置为“静态”时,当在模态主体外的任何地方点击时,模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能,当设置为false时,Esc键不会关闭模式对话框。

    28.3K40

    ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件

    Data属性 VS 编程API Bootstrap提供了完全通过HTML标记的方式来使用插件,这意味着,你可以不写任何JavaScript代码,事实这也是Bootstrap推荐的使用方式。...举个栗子,若要使Alert组件支持关闭功能,你可以通过添加data-dismiss="alert"属性到按钮(Botton)或者链接(A)元素,如下代码所示: <div class="alert alert-danger...(dropdown.js) 使用dropdown插件(增强交互性),你可以将<em>下拉菜单</em>添加到绝大多数的<em>Bootstrap</em>组件<em>上</em>,比如navbar、tabs等。...<em>Bootstrap</em>的模态框本质上有3部分组成:模态框的头、体和一组放置于底部的按钮。你可以<em>在</em>模态框的Body中添加任何标准的HTML标记,包括Text或者嵌入的Youtube视频。...<em>上</em>添加data属性:data-dismiss="modal"可以实现对模态框的关闭,当然你也可以使用编程方式API来完成: <button type="button" class="btn btn-primary

    5.2K60

    BootStrap应用开发学习入门1

    答:字体图标是 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。... fonts 文件夹内可以找到字体图标,它包含了下列这些文件 (相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css...导航栏移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。...下拉菜单 #Bootstrap .class 样式解释 .dropdown 指定下拉菜单都包裹在div标签或者ul标签下 .dropup 指定向上弹出的下拉菜单 .dropdown-menu 创建下拉菜单...,部署兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE

    44.8K21

    BootStrap应用开发学习入门1

    答:字体图标是 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。... fonts 文件夹内可以找到字体图标,它包含了下列这些文件 (相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css...导航栏移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。...下拉菜单 #Bootstrap .class 样式解释 .dropdown 指定下拉菜单都包裹在div标签或者ul标签下 .dropup 指定向上弹出的下拉菜单 .dropdown-menu 创建下拉菜单...,部署兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE

    44.3K30

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

    本文中,我们将深入探讨 Bootstrap 中一些常用的组件,适合初学者,帮助他们更好地理解和应用这些元素。 什么是 Bootstrap 组件?...下拉菜单 下拉菜单是导航栏中常见的交互元素,它们允许用户访问更多选项。Bootstrap 提供了易于创建的下拉菜单组件。...可关闭的警告框 有时候,您可能希望用户能够关闭警告框。Bootstrap 允许您创建可关闭的警告框,用户可以点击关闭图标来关闭警告。...您可以模态框的主体部分添加任何自定义内容,包括文本、表单、图像或其他元素。...本文中,我们探讨了一些常用的 Bootstrap 组件,包括按钮、表格、导航栏、警告框、模态框和进度条。这些组件可以根据您的需求进行自定义,并在网页设计中发挥重要作用。

    19120

    Textmate使用手册「建议收藏」Textmate使用手册

    cmd + z 返回前一个内容 cmd + ] 增加缩进 cmd + [ 减少缩进 cmd + T 打开项目下的文件 cmd + O 打开项目 cmd + N 新建文件 cmd + W 关闭标签...F2 标记 cmd + shift + z 返回后一个内容 cmd + option + [ 格式化代码 cmd + shift + T 当前文件中所有方法的 cmd + shift + W 关闭项目...ctrl + 箭头 向上移动下拉菜单 ctrl + 下箭头 向下移动下拉菜单 ctrl + cmd + 箭头 向上移动整行 ctrl + cmd + 下箭头 向下移动整行 ctrl +...tab 输入def按tab它会自动补全end esc 以该文件中已经出现过的词做自动补全,可以按多次esc切换单词 view: F1 Fold current block cmd+t open...tab / ^tab 左边文件夹侧栏与右边编辑窗口间切换 selection: ^w select current word shift^l select current line (of course

    1.9K20

    Bootstrap基本入门大全

    下面有常用的bootstrap介绍,基本就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行和列构建的布局,可以跟着屏幕自动布局 最多可以展示12个列...背景类:bg- 背景颜色可以bg-后加上上面同样的颜色 按钮: × 关闭的小叉: <span class="caret..."danger/success/warning/info" 表格中垂直居中:vertical-middle 4.列表: ul中加入list-group li中加入list-group-item 加入徽章...激活状态和禁用状态 激活:active 禁用:disabled 按钮式的下拉菜单 将ul列表转换为下拉菜单,添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...10.警告框: 输出提示警告信息,可以进行关闭 alert 也可以进行颜色的设置 alert-danger/warning/info/success 其中关闭的按钮是一个button,添加 <button

    2K10

    Bootstrap基本入门大全

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT的,它简洁灵活,使得 Web 开发更加快捷。...下面有常用的bootstrap介绍,基本就够用了,但是有些样式也没有写全,先自己学会怎么使用,再去官网上深入研究吧 1.栅格系统 定义:一系列行和列构建的布局,可以跟着屏幕自动布局 最多可以展示12个列...背景类:bg- 背景颜色可以bg-后加上上面同样的颜色 按钮: × 关闭的小叉: <span class="caret...激活状态和禁用状态 激活:active 禁用:disabled 按钮式的<em>下拉菜单</em> 将ul列表转换为<em>下拉菜单</em>,添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...10.警告框: 输出提示警告信息,可以进行<em>关闭</em> alert 也可以进行颜色的设置 alert-danger/warning/info/success 其中<em>关闭</em>的按钮是一个button,添加 <button

    2.6K100

    前端|BootStrap 布局组件

    部分组件的使用 1.Bootstrap 图标(Glyphicons) 使用图标的方法非常简单,只需要在任何内联元素应用对应的样式即可。...如: 2.Bootstrap 下拉菜单 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可...3.Bootstrap 输入框组 向 .form-control 添加前缀或后缀元素的步骤如下:把前缀或后缀元素放在一个带有 class .input-group 的 中接着,相同的<div...4.Bootstrap 导航元素 创建一个标签式的导航菜单:以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。 ?...如需使用徽章,只需要把 添加到链接、Bootstrap 导航等这些元素即可。 总结 总而言之,这些bootstrap组件给带来了非常多的便利。

    3.4K40

    PythonFinance的应用4 :处理股票数据进阶

    欢迎来到Python for Finance教程系列的第4部分。 本教程中,我们将基于Adj Close列创建烛形/ OHLC图,这将允许我介绍重新采样和其他一些数据可视化概念。...名为烛形图的OHLC图表是一种将开盘价,最高价,最低价和收盘价数据全部集中一个很好的格式中的图表。 另外,它有漂亮的颜色和前面提到的美丽的图表?...Adj Close'].resample('10D').ohlc() 我们在这里所做的是创建一个基于df ['Adj Close']列的新数据框,重新封装10天的窗口,并且重采样是一个ohlc(开高低关闭...由于仅仅只要在Matplotlib中绘制列,所以实际不希望日期成为索引,可以这样做: df_ohlc = df_ohlc.reset_index() 现在的日期只是一个普通的列。...我们的例子中,我们选择0。 plt.show() ?

    1.9K20
    领券