Ich möchte ein Menü erstellen, das nur angezeigt wird, wenn es den Fokus durch Tabulatortaste erhält. Zum Beispiel, wenn Sie diese Website öffnen http://bon.agh.edu.pl/ und drücken Sie die Tabulatortaste neues Menü wird angezeigt. Ich habe einen Code unten, aber es funktioniert nicht?JS Aktion auf Fokus
<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>
Ich weiß nicht, was ich falsch mache. Irgendein Vorschlag?
OK Ich schaffte es, das Problem zu lösen. Wenn jemand wird es brauchen die Lösung ist unten
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)
Danke
Sie könnten ein 'on-focus' Ereignis zuordnen und nur die Callback-Funktion ausführen, wenn das Menü Fokus nicht. Wenn der Benutzer darauf klickt, wird das Ereignis ausgelöst, aber die Callback-Funktion wird nicht ausgeführt (das Element ist bereits fokussiert). Sie können herausfinden, welches Element mit etwas Hilfe fokussiert ist [https://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus? rq = 1). – C0ZEN