jQuery选项卡和shift +选项卡来显示导航 [英] jQuery tab and shift+tab to show navigation
本文介绍了jQuery选项卡和shift +选项卡来显示导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在父项上标签时显示子导航，然后在标签或shift + tab-out子菜单时隐藏。
这是我的JS。我有第一个和最后一个声明工作，但不能得到最后一个。我做错了什么？
//显示子导航jQuery（'。has-child，.currenthas-child'）。 （e）{if（e.keyCode == 9&&！e.shiftKey）{jQuery（this）.children（）。show（）;}}）; / / SHIFT + TAB BUTTON jQuery（'。submenu li：first-child'）。keydown（function（e）{if（e.keyCode == 9&& e.shiftKey）{jQuery（this）.parent（ ）.hide（）; console.log（tab first）;}}）; （）函数（e）{if（e.keyCode == 9&&！e.shiftKey）{jQuery（this）.parent（） .hide（）; console.log（tab last）;}}）;
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< nav role = 导航 > < button class =menu-togglearia-label =导航菜单>< / button> < ul class =menu> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenustyle =display：block;> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenustyle =display：none;> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < / UL> < / nav>
解决方案
像这样的东西？
[ 在显示当前时具有子子菜单和隐藏兄弟。为了不隐藏兄弟，只需在 li.keydown 事件中的 .end（） / div>]
/ *在这里，我简单地将每个事件分配给一个变量，以便于进行简单的implimintation。 * / var myEvents = {click：function（e）{jQuery（this）.children（'ul'）。show（）。end（）。siblings（'li'）。find（'ul'）。hide（） ; }，keydown：function（e）{e.stopPropagation（）; if（e.keyCode == 9）{if（！e.shiftKey&& jQuery（'nav li'）.index（jQuery（this））==（jQuery（'nav li'）.length-1） ）jQuery（'nav li：first'）。focus（）; else if（e.shiftKey&& jQuery（'nav li'）。index（jQuery（this））=== 0）jQuery（'nav ul：first> li：last'）。focus（）。blur （）; }}，keyup：function（e）{e.stopPropagation（）; if（e.keyCode == 9）{if（myEvents.cancelKeyup）myEvents.cancelKeyup = false; else myEvents.click.apply（this，arguments）; （'click'，'li'，myEvents.click）.on（'keydown'，'li'，myEvents.keydown）.on（'keyup'，'li'，myEvents。 （'nav li'）。each（function（i）{this.tabIndex = i;}）; / *下面是简单的使子菜单的菜单变得更容易理解* / jQuery（'li'）。each（function（i）{if（jQuery（this）.children（'ul'）。length）jQuery（this）.addClass（'highlight'）;}）; li ul {display：none; } .highlight> {背景：黄色; }
< script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< nav role =navigation> < button class =menu-togglearia-label =导航菜单>按钮< /按钮> < ul class =menu> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> <李> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> <李> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> <李> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < li class =has-child> < a href =＃>菜单项< / a> < ul class =submenu> < li>< a href =＃>菜单项< / a>< / li> < / UL> < /锂> < / UL> < / nav>
I'm trying to show sub navigation when tabbing on parent items and then hide when tabbing or shift+tabbing out of sub-menu.
Here's my JS. I have the first and last statements working, but can't get the last. What am I doing wrong?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown( function(e) {
if (e.keyCode == 9 && e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown( function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
jQuery(this).parent().hide();
console.log("tab last");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu"></button>
<ul class="menu">
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu" style="display: block;">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu" style="display: none;">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
</ul>
</li>
</ul>
</nav>
解决方案
Something like this?
[Has sub-sub-menus and hides siblings when showing current. To not hide siblings, simply remove code after .end() in the li.keydown event]
/* Here i simply assign each event to a variable for easy implimintation. */
var myEvents = {
click: function(e) {
jQuery(this).children('ul').show().end().siblings('li').find('ul').hide();
},
keydown: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (!e.shiftKey && jQuery('nav li').index(jQuery(this)) == (jQuery('nav li').length-1)) jQuery('nav li:first').focus();
else if (e.shiftKey && jQuery('nav li').index(jQuery(this)) === 0) jQuery('nav ul:first > li:last').focus().blur();
}
},
keyup: function(e) {
e.stopPropagation();
if (e.keyCode == 9) {
if (myEvents.cancelKeyup) myEvents.cancelKeyup = false;
else myEvents.click.apply(this, arguments);
}
}
}
jQuery(document)
.on('click', 'li', myEvents.click)
.on('keydown', 'li', myEvents.keydown)
.on('keyup', 'li', myEvents.keyup)
// this is needed to keep tabbing focus correct
jQuery('nav li').each(function(i) { this.tabIndex = i; });
/* Below is simply for making menus with sub menues more noticable */
jQuery('li').each(function(i) { if (jQuery(this).children('ul').length) jQuery(this).addClass('highlight'); });
li ul { display: none; }
.highlight > a { background: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav role="navigation">
<button class="menu-toggle" aria-label="Navigation menu">Button</button>
<ul class="menu">
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li>
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li>
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li>
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</li>
<li class="has-child">
<a href="#">Menu Item</a>
<ul class="submenu">
<li><a href="#">Menu Item</a></li>
</ul>
</li>
</ul>
</nav>
这篇关于jQuery选项卡和shift +选项卡来显示导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
