How to use left and right arrow keys to navigate in bootstrap navbar(如何使用向左和向右箭头键在引导导航栏中导航)
本文介绍了如何使用向左和向右箭头键在引导导航栏中导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面的html中定义了Bootstrap 3菜单系统。 如果菜单键盘打开，则按向左和向右箭头键将被忽略。 如何强制向左箭头打开上一个菜单，强制向右箭头打开下一个菜单板，就像在常规窗口菜单中一样？ 在jQuery UI菜单栏中，左右箭头是这样工作的。如何让它们也在引导导航栏中工作？<!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" />
<base href="http://localhost:52216/" />
<link rel="stylesheet" href="/admin/themes/redmond/jquery-ui.css" type="text/css" />
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="/admin/Content/bootstrap.css" rel="stylesheet"/>
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet"/>
<link href="/admin/Content/Css/Site.css" rel="stylesheet"/>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/i18n/jquery.ui.datepicker-et.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"><span class="skiplink-text">Skip to main content</span></div>
</a>
<header class="row">
<nav class="navbar navbar-default">
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown1
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_OrderCenter' tabindex='-1' >Option1</a></li>
<li><a>Mobiilne tellimus</a></li><li><a >Ostukorv</a></li><li><a id='menu_Artomlii' tabindex='-1' entity='Artomlii' href='Artomlii?_user=admin&_company=1'>Tootepuu</a></li><li><a id='menu_Artomadu' tabindex='-1' entity='Artomadu' href='Artomadu?_user=admin&_company=1'>Tootepuu leht</a></li><li><a id='menu_Artpilt' tabindex='-1' entity='Artpilt' href='Artpilt?_user=admin&_company=1'>Toote pilt</a></li><li><a id='menu_Webconte' tabindex='-1' entity='Webconte' href='Webconte?_user=admin&_company=1'>Sisuhaldus</a></li>
</ul></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown2
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_Klient' tabindex='-1' entity='Klient' href='Klient?_user=admin&_company=1' title='Ctrl+K'>Klient</a></li><li><a id='menu_ToodeL' tabindex='-1' entity='ToodeL' href='ToodeL?_user=admin&_company=1' title='Ctrl+D'>Artikkel</a></li><li><a id='menu_Konto' tabindex='-1' entity='Konto' href='Konto?_user=admin&_company=1'>Konto</a></li><li><a id='menu_ToodeS' tabindex='-1' entity='ToodeS' href='ToodeS?_user=admin&_company=1'>Summa</a></li><li><a id='menu_ToodeP' tabindex='-1' entity='ToodeP' href='ToodeP?_user=admin&_company=1'>Põhivara</a></li><li><a id='menu_ToodeV' tabindex='-1' entity='ToodeV' href='ToodeV?_user=admin&_company=1'>Väikevahend</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Klliik' tabindex='-1' entity='Klliik' href='Klliik?_user=admin&_company=1'>Kliendi liik</a></li><li><a id='menu_ArtliikL' tabindex='-1' entity='ArtliikL' href='ArtliikL?_user=admin&_company=1'>Artikli liik</a></li><li><a id='menu_Artryhm' tabindex='-1' entity='Artryhm' href='Artryhm?_user=admin&_company=1'>Artikli rühm</a></li><li><a id='menu_ArtliikP' tabindex='-1' entity='ArtliikP' href='ArtliikP?_user=admin&_company=1'>Põhivara liik</a></li><li><a id='menu_ArtliikV' tabindex='-1' entity='ArtliikV' href='ArtliikV?_user=admin&_company=1'>Väikevahendi liik</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Maksetin' tabindex='-1' entity='Maksetin' href='Maksetin?_user=admin&_company=1'>Maksetingimus</a></li><li><a id='menu_Myygikoo' tabindex='-1' entity='Myygikoo' href='Myygikoo?_user=admin&_company=1'>Müügikood</a></li><li><a id='menu_Kurss' tabindex='-1' entity='Kurss' href='Kurss?_user=admin&_company=1'>Rahakurss</a></li><li><a id='menu_Pank' tabindex='-1' entity='Pank' href='Pank?_user=admin&_company=1'>Pank</a></li><li><a id='menu_Raha' tabindex='-1' entity='Raha' href='Raha?_user=admin&_company=1'>Raha</a></li>
</ul></li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button'>Dropdown3
</a>
<ul class='dropdown-menu' role='menu'>
<li><a id='menu_DoklstlG' tabindex='-1' >Arve</a></li><li><a id='menu_DoklstlO' tabindex='-1' entity='DoklstlO' href='DoklstlO?_user=admin&_company=1'>Ostuarve</a></li><li><a href='http://localhost:52216/admin/Pay/Index/UnpaidG'>Arve laekumine</a></li><li><a href='http://localhost:52216/admin/Pay/Index/UnpaidO'>Ostuarve tasumine</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_DoklstdM' tabindex='-1' entity='DoklstdM' href='DoklstdM?_user=admin&_company=1' title='Ctrl+M'>Maksekorraldus</a></li><li><a id='menu_DoklstdT' tabindex='-1' entity='DoklstdT' href='DoklstdT?_user=admin&_company=1'>Laekumine panka</a></li><li><a id='menu_DoklstdI' tabindex='-1' entity='DoklstdI' href='DoklstdI?_user=admin&_company=1'>Kassa sissetulek</a></li><li><a id='menu_DoklstdA' tabindex='-1' entity='DoklstdA' href='DoklstdA?_user=admin&_company=1'>Kassa väljaminek</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_DoklstdK' tabindex='-1' entity='DoklstdK' href='DoklstdK?_user=admin&_company=1'>Kulu dokument</a></li><li><a id='menu_DoklstdJ' tabindex='-1' entity='DoklstdJ' href='DoklstdJ?_user=admin&_company=1'>Muu väljastatud</a></li><li><a id='menu_DoklstdU' tabindex='-1' entity='DoklstdU' href='DoklstdU?_user=admin&_company=1'>Muu sissetulnud</a></li><li><a id='menu_DoklstlE' tabindex='-1' entity='DoklstlE' href='DoklstlE?_user=admin&_company=1'>Leping</a></li><li><a id='menu_DoklstlR' tabindex='-1' entity='DoklstlR' href='DoklstlR?_user=admin&_company=1'>Realisatsiooniakt</a></li><li><a id='menu_DoklstdL' tabindex='-1' entity='DoklstdL' href='DoklstdL?_user=admin&_company=1'>Akt</a></li><li><div class='ui-widget-content ui-eeva-separator'></div></li><li><a id='menu_Hinnamtr' tabindex='-1' entity='Hinnamtr' href='Hinnamtr?_user=admin&_company=1'>Hinnamaatriks</a></li><li><a id='menu_Hkpais' tabindex='-1' entity='Hkpais' href='Hkpais?_user=admin&_company=1'>Hinnakujundus</a></li><li><a id='menu_Hkrid' tabindex='-1' entity='Hkrid' href='Hkrid?_user=admin&_company=1'>Hinnakiri</a></li>
</ul></li>
<li>
<a tabindex='-1' class='logout' href='/admin/Account/LogOff'
title='Unusta kasutajanimi ja parool'>
Log out
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
</html>
推荐答案
这样的代码将对您的代码起作用：
$(document).ready(function () {
$('.dropdown').on('shown.bs.dropdown', function () {
var $dd = $(this);
$(document).on('keydown.dd', function (e) {
if (e.which == 39) {
$dd.next('.dropdown').find('.dropdown-toggle').focus().trigger('click');
} else if (e.which == 37) {
$dd.prev('.dropdown').find('.dropdown-toggle').focus().trigger('click');
}
});
}).on('hide.bs.dropdown', function () {
$(document).off('keydown.dd');
});
});
See it in action here
这篇关于如何使用向左和向右箭头键在引导导航栏中导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
沃梦达教程
本文标题为：如何使用向左和向右箭头键在引导导航栏中导航
基础教程推荐
猜你喜欢
- 动态更新多个选择框 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
