如何使下拉菜单聚焦

Question

我尝试执行辅助功能菜单。我使用了jquery.focus，但没有任何反应。没有添加任何类。

我的代码：

<script type="text/javascript">
(function($) {
$('.menu-item-has-children a').focus( function () {
$(this).siblings('.sub-menu').addClass('focused');
}).blur(function(){
$(this).siblings('.sub-menu').removeClass('focused');
});
$('.sub-menu a').focus( function () {
$(this).parents('.sub-menu').addClass('focused');
}).blur(function(){
$(this).parents('.sub-menu').removeClass('focused');
});
})(jQuery);
</script>

我使用的类是正确的。控制台中没有错误

Answer 1

嗨，帮我检查一下这个工作是否正常，可能是你有其他问题。

(function($) {
$('.menu-item-has-children a').focus( function () {
$(this).siblings('.sub-menu').addClass('focused');
}).blur(function(){
$(this).siblings('.sub-menu').removeClass('focused');
});
$('.sub-menu a').focus( function () {
$(this).parents('.sub-menu').addClass('focused');
}).blur(function(){
$(this).parents('.sub-menu').removeClass('focused');
});
})(jQuery);

.sub-menu{
opacity:0;
}
.sub-menu.focused{
opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li class="menu-item-has-children">
<a href="#">Link 1</a>
<div class="sub-menu">
sub menu working
</div>
</li>
</ul>
</div>