”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何防止 Twitter Bootstrap 下拉菜单在内部点击时关闭?

如何防止 Twitter Bootstrap 下拉菜单在内部点击时关闭?

发布于2024-11-07
浏览:647

How to Prevent Twitter Bootstrap Dropdown Menus from Closing on Internal Clicks?

防止内部点击时下拉菜单关闭

要防止 Twitter Bootstrap 下拉菜单在单击内部元素时关闭,一种规避解决方案需要委托点击事件处理。以下是详细说明和建议的解决方案:

默认情况下,Twitter Bootstrap 下拉菜单会在任何单击后关闭,即使在菜单本身内也是如此。为了克服这种行为,一种常见的方法是将单击事件处理程序附加到下拉菜单并调用 event.stopPropagation() 以防止事件传播。

但是,对于使用轮播控件等组件的设置,委托事件Twitter Bootstrap 的处理机制可能会干扰预期的行为。在这种情况下,由于事件未到达委托的事件处理程序,单击这些控件可能不会触发预期的操作。

依赖下拉隐藏/隐藏事件不是一个可行的替代方案,因为这些事件缺乏必要的信息,并且控制下拉内容。

建议的解决方案

一个有效的解决方案是在容纳下拉菜单的容器元素上使用事件委托。这是一个示例:

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();
});

在此示例中,单击指定容器内的元素仍会将事件传播到其各自的委托处理程序。但是,专门针对下拉菜单的点击将被拦截,并且 event.stopPropagation() 将阻止下拉菜单的关闭行为。

最新教程 更多>
  • 如何在 Node.js 中提前退出 forEach 循环?
    如何在 Node.js 中提前退出 forEach 循环?
    如何中断 Node.js forEach 循环在需要递归遍历嵌套数据结构并对每个元素执行操作的情况下,您可以使用递归和forEach 的组合。但是,在某些情况下,您可能需要提前退出 forEach 循环。与带有 break 或 continue 语句的常规循环不同,forEach 缺乏停止迭代的内置...
    编程 发布于2024-11-08
  • Day f Brylnt:Next.js 与 Remix
    Day f Brylnt:Next.js 与 Remix
    大家好!我知道这与 Brylnt 的制作并不直接相关,但在决定使用哪个框架时我遇到了一些问题,我想我应该分享一下我对两个流行竞争者的想法:Next.js 和 混音. 这两个框架都很优秀,根据项目的不同,任何一个都可能是正确的选择。由于我使用的是 T3 Stack,其中包括 Next.js,我自然倾向...
    编程 发布于2024-11-08
  • 学习 CSS 网格:包含大量示例的简单指南
    学习 CSS 网格:包含大量示例的简单指南
    Hey there! If you've ever felt like CSS Grid is a bit like trying to solve a Rubik's Cube blindfolded, you're not alone. I'm Eleftheria, and today, I'...
    编程 发布于2024-11-08
  • 如何在 JavaScript 中强制刷新网页并绕过缓存?
    如何在 JavaScript 中强制刷新网页并绕过缓存?
    使用 JavaScript 硬刷新当前页面强制 Web 浏览器通过 JavaScript 硬刷新页面可确保获取页面的全新副本并更新其所有外部资源。 为了实现这一点,JavaScript 提供了一个名为 location.reload(true) 的方法。当传递 true 值时,此方法指示浏览器绕过其...
    编程 发布于2024-11-08
  • 什么是 PATH_INFO 以及它如何增强 PHP Web 应用程序?
    什么是 PATH_INFO 以及它如何增强 PHP Web 应用程序?
    深入研究 PATH_INFO:揭示其在 PHP Web 应用程序中的作用在 Web 开发领域,PHP 是一个强大的工具,用于创建动态和交互式应用程序。它的全部功能之一是名为 PATH_INFO 的神秘变量。尽管经常被提及,但许多人仍然难以理解其确切作用。本文深入研究 PATH_INFO,阐明其目的、...
    编程 发布于2024-11-08
  • 如何使用 Connector .NET 检索 MySQL 中的最后一个插入 ID?
    如何使用 Connector .NET 检索 MySQL 中的最后一个插入 ID?
    使用 Connector .NET 在 MySql 中检索最后一个插入 ID在 MySql 中,最后一个插入 ID 是指分配给新插入的标识符排。该值在某些情况下可能很有价值,例如填充外键关系。最初,假设 MySqlHelper 类的 ExecuteNonQuery 方法返回最后一个插入 ID。然而,...
    编程 发布于2024-11-08
  • 如何在 PHP 中使用 cURL 获取 API 响应?
    如何在 PHP 中使用 cURL 获取 API 响应?
    在 PHP 中使用 cURL 获取 API 响应在 PHP 中,您可以创建一个独立的类,其中包含通过 cURL 调用 API 的函数并获得响应。以下是实现此目的的方法:class ApiRequest { public function getResponse($url) { // Se...
    编程 发布于2024-11-08
  • Ansible 入门 - 初学者指南:日复一日的 DevOps 工具系列
    Ansible 入门 - 初学者指南:日复一日的 DevOps 工具系列
    欢迎来到我们的“50 天 50 个 DevOps 工具”系列的第 30 天!今天,我们将探索 Ansible,它是 DevOps 工具包中最重要的工具之一。本博客将向您介绍 Ansible 的基础知识,分解其关键组件并向您展示如何从简单的示例开始。我们会让事情简单明了,使其成为初学者的完美起点。 ...
    编程 发布于2024-11-08
  • 什么是CPU寄存器
    什么是CPU寄存器
    什么是寄存器: 计算机寄存器是计算机中央处理单元 (CPU) 内的小型高速存储单元,用于临时保存数据和指令,以便在处理过程中快速访问。它们是直接影响 CPU 运算速度和效率的重要组件。 寄存器的访问速度比内存更快,因为它们位于 CPU 内部。这种接近性允许更快的数据检索和处理。 寄存器内存是计算机中...
    编程 发布于2024-11-08
  • 折叠还是双折?这是一个技术问题!
    折叠还是双折?这是一个技术问题!
    我们现在不能停下来,因为我们已经投资了 1 倍,但多年来让我们继续投入 100 倍!斯托克斯! JavaScript 示例 你可能以前听说过,但 Javascript 是在 10 天之内写成的。它的采用率迅速增长,即使在使用该语言几年后,他们也不想引入重大变化……所以,现在该语言已经...
    编程 发布于2024-11-08
  • 动态 Getter 和 Setter 如何增强 JavaScript 的灵活性?
    动态 Getter 和 Setter 如何增强 JavaScript 的灵活性?
    在 JavaScript 中实现动态 Getter 和 Setter:指南在传统 JavaScript 中,getter 和 setter 是为特定属性名称定义的。但是,可以使用 ES2015 中引入的代理创建更灵活的动态 getter 和 setter。使用代理的动态 getter 和 sette...
    编程 发布于2024-11-08
  • 如何在 Go 中将类型变量传递给函数进行类型断言?
    如何在 Go 中将类型变量传递给函数进行类型断言?
    将类型变量传递给函数进行类型断言您希望通过将类型传递给函数来执行类型断言。本质上,您的目标是实现以下目标:// Note that this is pseudocode, because Type isn't valid here func myfunction(mystring string, m...
    编程 发布于2024-11-08
  • 从输入字段获取文本..
    从输入字段获取文本..
    Java代码 public class MainActivity extends AppCompatActivity { Button btn; TextView textView; @Override protected void onCreate(Bundle s...
    编程 发布于2024-11-08
  • PSD 批量编辑器
    PSD 批量编辑器
    大家好!我正在分享我在过去几个月开发的这个新软件。 我希望它可以帮助一些人,并且有些人可能有兴趣帮助我改进它。我想添加很多功能,所以请随时告诉我您希望在软件中看到什么。 在技术方面,我开始这个项目是为了尝试在我的代码中实现一些设计模式,并更好地构建架构。这也是我第一次使用QT(我在过去的GUI项目...
    编程 发布于2024-11-08
  • 为什么 WinAPI Sleep(1) 会导致 15 毫秒暂停?
    为什么 WinAPI Sleep(1) 会导致 15 毫秒暂停?
    了解 WinAPI Sleep() 函数持续时间的差异当以 1 毫秒为参数调用 WinAPI Sleep() 函数时,据观察,线程实际上暂停的时间要长得多,通常约为 15 毫秒。这种现象引起了人们对潜在系统问题的担忧。Windows 中的时间量化Windows 采用时间量化机制进行线程调度。这意味着...
    编程 发布于2024-11-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3