如何使用向左和向右箭头键在引导导航栏中导航
下面的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
相关文章