twitter-bootstrap 当它通过 Jquery 获得焦点时打开一个下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33129942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open a dropdown menu when it receives focus via Jquery
提问by HerbalChaos420
So I have a navbar with a couple dropdown menus. Long story short, it's hard-coded into our site, and we need to find a way to trigger these dropdowns without the mouse. I have tried other methods, but as of now I want to use this one:
所以我有一个带有几个下拉菜单的导航栏。长话短说，它被硬编码到我们的网站中，我们需要找到一种无需鼠标即可触发这些下拉菜单的方法。我尝试过其他方法，但到目前为止我想使用这个方法：
As a blind user tabs through the menu, I would like the dropdowns to open when they receive focus. I believe I just need the correct syntax to actually trigger this but I cannot find it. I am using this jquery:
作为盲人用户通过菜单选项卡，我希望下拉菜单在获得焦点时打开。我相信我只需要正确的语法来实际触发它，但我找不到它。我正在使用这个 jquery：
$(document).ready(function () {
$("#testF").on("focus",function() {
$(this).dropdown("open");
});
});
My problem seems to lie within the .navbar-toggle("open"); (wrong syntax) I am simply trying to figure out how this dropdown will open as it comes into focus? Any help will be much appreciated, here is some of the dropdown HTML incase it helps:
我的问题似乎在于 .navbar-toggle("open"); （错误的语法）我只是想弄清楚这个下拉菜单在它成为焦点时将如何打开？任何帮助将不胜感激，这里是一些下拉 HTML 以防万一它有帮助：
<li class="dropdown">
<a id="testF" href="#" class="dropdown-toggle" data-toggle="dropdown">Courses<span class="caret" /></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="/home/BbDeepLink" target="_blank">All Courses (click here)</a>
</li>
CSS:
CSS：
/* Menu */
.navbar-default .navbar-nav > li > a{
color:#222;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color:#222;
background-color:#fff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color:#fff;
background-color:#5396b1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color:#fff;
background-color:#5396b1;
}
.dropdown-menu{
padding:0px;
}
}
@media (min-width: 781px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
/* Fixes: The main menu hover/focus dropdown issue */
.navbar-default .navbar-nav .open ul {
display:none;
}
.navbar-default .navbar-nav .open:hover ul {
display:block;
}
}
回答by Joseph Norris
$(document).ready(function () {
$("#testF").on("focus",function() {
$("#testF").click();
});
});
回答by Jean LAMY
Inspired by this : jQuery handing both focus and click on an element.
受此启发：jQuery 处理焦点和单击元素。
The idea is to detect if it was a focus after a tab or a mouse click.
这个想法是在选项卡或鼠标单击后检测它是否是焦点。
var lastClick = null;
$('#testF').mousedown(function (e) {
lastClick = e.target;
}).focus(function (e) {
if (e.target != lastClick) {
$(this).dropdown("toggle");
}
lastClick = null;
});
Hope this is an acceptable answer to your question.
希望这是您问题的可接受答案。
回答by HerbalChaos420
Upon trial and error I reached my desired results (almost, need to blur away now so it doesn't stay open, tips welcome!) with the following code:
经过反复试验，我达到了我想要的结果（几乎，现在需要模糊，所以它不会保持打开状态，欢迎提示！）使用以下代码：
$(document).ready(function () {
$("#testF").on("focus",function() {
$(this).next(".dropdown-menu").toggle()
});
});
回答by Sivashankar
you can try this.
你可以试试这个。
$("#testF").select2();
$("#testF").next(".select2").find(".select2-selection").focus(function() {
$("#testF").select2("open");
});
回答by Douglas Dreer
this my solution:
这是我的解决方案：
$("#dropdownMenuButton").on("focus", elements => {
var element = elements.currentTarget;
$(element).dropdown("toggle");
})<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf8">
<title>Page Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row">
<div class="col-xl-12">
<h1>Teste de Menu</h1>
<div class="dropdown dropright">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
https://stackoverflow.com/questions/33129942/open-a-dropdown-menu-when-it-receives-focus-via-jquery# </div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>