如何使用向左和向右箭头键在引导导航栏中导航 [英] How to use left and right arrow keys to navigate in bootstrap navbar
本文介绍了如何使用向左和向右箭头键在引导导航栏中导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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');
});
});
这篇关于如何使用向左和向右箭头键在引导导航栏中导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
