如何使用左右箭头键在引导导航栏中导航

Question

Bootstrap 3 menu süstem is defined in html below. Bootstrap 3菜单系统在下面的html中定义。 If menu pad is opened, pressing left and right arrow keys is ignored. 如果打开菜单面板，则忽略向左和向右箭头键。

How to force left arrow to open previous menu and and right arrow to open next menu pad just like in regular windows menu? 像普通的Windows菜单一样，如何强制向左箭头打开上一个菜单，向右箭头打开下一个菜单板？ In jquery ui menu bar left and right arrows work in this way. 在jQuery ui菜单栏中，左右箭头以这种方式工作。 How to make them work in bootstrap navbar also ? 如何使它们在引导导航栏中也起作用？

<!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&#245;hivara</a></li><li><a id='menu_ToodeV' tabindex='-1' entity='ToodeV' href='ToodeV?_user=admin&_company=1'>V&#228;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&#252;hm</a></li><li><a id='menu_ArtliikP' tabindex='-1' entity='ArtliikP' href='ArtliikP?_user=admin&_company=1'>P&#245;hivara liik</a></li><li><a id='menu_ArtliikV' tabindex='-1' entity='ArtliikV' href='ArtliikV?_user=admin&_company=1'>V&#228;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&#252;&#252;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&#228;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&#228;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>

Answer 1

Something like this will do the trick for your code: 这样的事情将为您的代码解决问题：

$(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 在这里看到它的作用

如何使用左右箭头键在引导导航栏中导航

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-01 14:28:29

如何使用左右箭头键在引导导航栏中导航

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-01 14:28:29

解决方案1
1 已采纳 2015-05-01 14:28:29