我想通过键盘交互访问css菜单。我希望能够标记每个链接,包括子菜单链接。
如果下拉焦点移至下一个父链接下拉列表,则上一个下拉列表应隐藏。
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span><a href="#">Parent link 1</a></span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li><a href="#">Sub Link</a></li>
<li><a href="#">Sub Link</a></li>
</ul>
</div>
</div>
</li>
</ul>
的JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
答案 0 :(得分:0)
我不确定您对此结果的期望结果和需求是什么,但希望这会帮助您。
由于命名惯例和方法,我不得不重做你的例子,但我认为这是你想要的......
这是一个演示,以防万一...... JSFiddle
<强> HTML 强>
<ul class="navbar">
<li class="navbar-item">
<a href="javascript:;">Parent Link</a>
<ul class="navbar-sub">
<li class="navbar-sub-item">
<a href="#url_redirect">One</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Two</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Three</a>
</li>
</ul>
</li>
<li class="navbar-item">
<a href="javascript:;">Parent Link</a>
<ul class="navbar-sub">
<li class="navbar-sub-item">
<a href="#url_redirect">One</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Two</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Three</a>
</li>
</ul>
</li>
<li class="navbar-item">
<a href="javascript:;">Parent Link</a>
<ul class="navbar-sub">
<li class="navbar-sub-item">
<a href="#url_redirect">One</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Two</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Three</a>
</li>
</ul>
</li>
<li class="navbar-item">
<a href="javascript:;">Parent Link</a>
<ul class="navbar-sub">
<li class="navbar-sub-item">
<a href="#url_redirect">One</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Two</a>
</li>
<li class="navbar-sub-item">
<a href="#url_redirect">Three</a>
</li>
</ul>
</li>
</ul>
<强> CSS 强>
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
<强>的jQuery 强>
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
答案 1 :(得分:-1)
在这里,简单的jquery:)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
&#13;
当鼠标结束/离开父div时,这基本上显示/隐藏每个下拉列表。
我不认为在焦点上显示dropbown菜单是个好主意,因为我相信你只能专注于某些元素,比如输入。
希望这有帮助!