javascript - 将数据切换添加到跨度元素时,未在 Enter 键上打开引导菜单
问题描述
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" >Dropdown Example</button>
<span tabindex=0 class="caret" data-toggle="dropdown"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
我有一个跨度元素,它有一个背景图像搜索,点击搜索按钮我打开菜单。我不需要搜索按钮旁边的按钮,因此我将 data-toggle=dropdown 添加到我的跨度中。当我用鼠标单击时会打开下拉菜单,但是当我将焦点移到跨度并按 Enter 键时菜单不会打开。
Here it is reproducible
解决方案
您需要在 HTML 中进行一些更改。移动按钮标签内的data-toggle="dropdown"
跨度并从跨度中删除属性并将其添加到按钮。
从
<button class="btn btn-primary dropdown-toggle" type="button" >Dropdown Example</button>
<span tabindex=0 class="caret" data-toggle="dropdown"></span>
至
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span tabindex=0 class="caret" data-toggle="dropdown"></span></button>
这是完整的代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span tabindex=0 class="caret" data-toggle="dropdown"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
推荐阅读
- python - Python,获得月收入百分比的公式
- python - 当文本不在 HTML 元素中时如何抓取文本
- xml - net.sf.saxon.s9api.SaxonApiException: XML 解析器处理报的 I/O 错误 null: null
- json - 将每个值存储到从 JSON 返回的变量中
- python-3.x - 如何填充时间序列数据框直到月底
- swift - UITextView 多行拼写问题 - Swift
- python - 在 python 中使用 zip() 从 for 循环中绘制元组
- while-loop - 为什么 Octave 在这个基本的 while 循环中会出现语法错误?
- powerbi - 带有嵌入式 PowerApp 的 PowerBI - 无法编辑
- laravel - Laravel 路由根在我的服务器中不起作用