Question

我想创建一个菜单，只有当它通过tab键获得焦点时才会出现。例如，如果您打开此网站http://bon.agh.edu.pl/并按Tab键，则会显示新菜单。我有一个下面的代码，但它不起作用？

<style>
.style{
    position: absolute;
    left: -60px;
}
.style1{
    position: absolute;
    left:10px;
}
</style>

<div id="navbar">
    <div class="menu-default-container">
        <ul id="menu-default" class="style">
            <li id="menu-item-756" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-756"><a href="http://localhost/sweetlife2">Główna</a></li>
            <li id="menu-item-753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-753"><a href="http://localhost/sweetlife2/pakiety/">Pakiety</a></li>
            <li id="menu-item-755" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-755"><a href="http://localhost/sweetlife2/internet/">Internet</a></li>
            <li id="menu-item-754" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-754"><a href="http://localhost/sweetlife2/telewizja/">Telewizja</a></li>
            <li id="menu-item-1151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1151"><a href="http://localhost/sweetlife2/kontakt/">Kontakt</a></li>
            <li id="menu-item-1386" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://localhost/sweetlife2/dokumenty/">Dokumenty</a></li>
        </ul>
    </div>
</div>

<script>
$('#menu-default').focus(function(){
    $("#navbar").removeClass();
    $('#navbar').addClass('style1');
},
function(){
    $("#navbar").removeClass();
    $('#navbar').addClass('style');
});
</script>

我不知道自己做错了什么。有什么建议吗？

好的，我设法解决了这个问题。如果有人需要它，解决方案如下：

var menu = document.getElementById("menu-default");
menu.addEventListener("focus", function( event ) {
   $("#navbar").removeClass();
   $('#navbar').addClass('style1');   
}, true);
menu.addEventListener("blur", function( event ) {
   $("#navbar").removeClass();
   $('#navbar').addClass('style');    
}, true)

谢谢

Answer 1

你应该在身体水平上捕捉按键。例如：

$("body").keypress(function( event ) {
    if ( event.which == 9) {
    event.preventDefault();
    $('#navbar').addClass('style1'); // Add or remove class.                       
   }
})

Click here for more information about keypress

JS关注焦点的行动

1 个答案: