个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
我正在尝试从引导下拉列表中捕获事件。似乎什么都不起作用，尽管显然我做错了什么。
代码，精简为问题......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar">
<a class="nav-link dropdown-toggle" href="#" id="search_drop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Search
</a>
<div class="dropdown-menu" aria-labelledby="search_drop">
<h2 class="text-primary">Search</h2>
<form class="navbar-form navbar-right navbar-expand-xl" id="header-searchForm">
<input type="text" class="form-control" placeholder="enter terms" name="Search" aria aria-selected="true" id="search_str" required="true">
<button type="submit" class="btn btn-sm btn-primary">
Search
</button>
</form>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#search_drop').on('show.bs.dropdown', function() {
console.log("show");
}).on('shown.bs.dropdown', function() {
console.log("shown");
}).on('hide.bs.dropdown', function() {
console.log("hide");
}).on('hidden.bs.dropdown', function() {
console.log("hidden");
});
</script>
</body>
</html>
没有任何一个 console.log 语句被命中。
最佳答案
您需要将触发按钮包装在具有下拉类和目标的元素中:
All dropdown events are fired at the .dropdown-menu’s parent element and have a relatedTarget property, whose value is the toggling anchor element.
还有...
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;.
$('.dropdown').on('show.bs.dropdown', function() {
console.log("show");
}).on('shown.bs.dropdown', function() {
console.log("shown");
}).on('hide.bs.dropdown', function() {
console.log("hide");
}).on('hidden.bs.dropdown', function() {
console.log("hidden");
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="navbar">
<div class="dropdown">
<a class="nav-link dropdown-toggle" href="#" id="search_drop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Search
</a>
<div class="dropdown-menu" aria-labelledby="search_drop">
<h2 class="text-primary">Search</h2>
<form class="navbar-form navbar-right navbar-expand-xl" id="header-searchForm">
<input type="text" class="form-control" placeholder="enter terms" name="Search" aria aria-selected="true" id="search_str" required="true">
<button type="submit" class="btn btn-sm btn-primary">
Search
</button>
</form>
</div>
</div>
</div>关于javascript - 捕获 .bs.dropdown 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55834376/
28
4
0
我正在尝试让 Bootstrap 下拉菜单与我的 Jade 布局一起使用。但实际上，当我尝试在我的 Jade 文件中执行 $(".dropdown-toggle").dropdown 时出现此错误:
我正在使用 Semantic React UI's Dropdown ，并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。 我尝试在父级的 render() 中使用 ref: (thi
我有一个脚本如下: var i = 0; function add_relation() { i = i + 1; var key = $('', {
我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 填充了正确来自数据库的数据。当用户在第一个 DropDown 上进行选择时，第二个 Dro
我是一名开发新手，但我偶然发现了一个我无法解决的案例。我将 ASP.NET MVC 与 C# 以及一些 javascript(JQuery、JSON...)结合使用。 我要做的是根据在 other 中
在 Bootstrap 文档中，似乎有两种不同的方法来创建下拉列表: .dropdown .btn-group first如下: Dropdown ...
我确实在 kv 文件中定义了一个基本的自定义 DropDown。应用程序 GUI 非常简单，顶部有一个按钮栏，屏幕的其余部分有一个 TextInput。这是代码: dropdowntrialgui.p
在移动 View 中单击 .dropdown 菜单时，.dropdown 和 .dropdown-menu 之间有一个小空间. 如图所示 Question is it possible to remo
我正在尝试创建一个类似于 DataEntry 网格/表的结构，其中用户在单击按钮时追加新行。该行将包含文本框、下拉菜单、日历控件。所有这些都应该在客户端完成。到目前为止，我已经有了这个，正如你所看到的
我有一个带有使用 ul 和 li ( jsfiddle ) 的下拉列表的 jsfiddle。尝试将其转换为选择选项下拉列表时，我没有得到相同的选项 ([jsfiddle]) 2 .我猜这与我重命名某个
我正在使用@atlaskit/dropdown-menu (https://atlaskit.atlassian.com/packages/core/dropdown-menu)。我想在 Item 点
我在我的 angular 应用程序中使用 PrimeNG，我有 p-dropdown 的问题 问题 我为 country 和 caste_category 有两个下拉菜单，我只为 India 提供 c
我有一个表单 View ，在编辑模板中我有两个下拉菜单。 下拉 1 明确设置了允许值的列表。它也设置为自动回发。 下拉 2 是数据绑定(bind)到 objectdatasource，这个 objec
我有一个名为 Agency 的下拉菜单，其中包含 2 个选项: 文凭 PPS 如果选择 SPM，则不会出现下拉菜单。但是，如果选择 PPS，则会出现另外 2 个名为 Department 和 Offi
我是 Angular 的新手，所以这可能是一个非常简单的问题。我正在使用 ngx-select-dropdown (下拉控件)。页面上有两个下拉控件，当第一个下拉列表更改时，第二个下拉列表应更新下拉选
我有一个包含文本区域的下拉菜单。当在文本区域按下返回键时，我希望关闭下拉菜单。这是以下内容的作用: $(document).ready(function(){ $('#edit').keypres
我的页面中有这些SELECT Pending Confirmed Cancelled Refunded Shipped Paid Complete 还有这个 Pending Confirme
我有兴趣学习以智能、优雅的方式在整个站点中构建导航项，这些导航项具有胡萝卜，单击后会展开菜单项列表。 我希望动态构建菜单项(不一定全部使用 ajax)。但它们不应在页面上进行硬编码。 这似乎是像 TW
我有一个选择下拉菜单，一个是 Bootstrap 导航下拉菜单，而不是单击以打开 Bootstrap 导航下拉菜单我在鼠标悬停时更改了它但是当选择下拉菜单打开并且鼠标悬停在 Bootstrap 导航上
我对此很陌生，所以如果我的问题没有按应有的方式提出，我深表歉意。 基本上，我使用 jQuery 的目的是，当从第一个下拉框中选择名为“Apple”的字段时，第二个下拉框将只允许选择“Firm”字段，而
我是一名优秀的程序员,十分优秀！