0
我试图显示子导航时,在父项上标签,然后隐藏时Tab或Shift + Tab键退出子菜单。jQuery选项卡和shift +选项卡以显示导航
这是我的JS。我有第一个和最后一个声明工作,但不能得到最后一个。我究竟做错了什么?
// Show Child Navigation
jQuery('.has-child, .currenthas-child').keydown(function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
\t jQuery(this).children().show();
}
});
//SHIFT + TAB BUTTON
jQuery('.submenu li:first-child').keydown(function(e) {
if (e.keyCode == 9 && e.shiftKey) {
\t jQuery(this).parent().hide();
\t console.log("tab first");
}
});
//TAB BUTTON
jQuery('.submenu li:last-child').keydown(function(e) {
if (e.keyCode == 9 && !e.shiftKey) {
\t jQuery(this).parent().hide();
\t 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>
与此代码 – frshjb373
@ frshjb373删除代码没有运气?你的js在吗?该片段似乎工作正常,并且按照你的要求做? – SpYk3HH
这是在代码片段中工作的,但是我在我的开发服务器上进行了测试,并且孩子在通过父母选项卡时没有显示。并想出问题是什么? – frshjb373