Umwandeln der Navigationsleiste auf dem Desktop in eine anklickbare Navigationsleiste auf dem Touchscreen

Question

Die folgende Frage bezieht sich auf eine Website, die ich erstelle.

Eine der Hauptkategorien in meiner Navigationsleiste zeigt eine Gruppe von Unterkategorien (interne Seitenverknüpfungen) an, wenn die Maus darüber bewegt wird. Um dies zu erreichen, verwende ich einfach den Befehl : hover in meinem CSS-Code. Das Problem ist, dass wenn ich meine Website auf einem Touchscreen-Gerät angesehen habe, ich die Unterkategorien öffnen kann, indem ich auf das: Hover-Element klicke (was ich will), aber ich kann das Sub nicht ausschalten -Kategorien durch Klicken auf das : Hover Element. Sobald sie auf dem Touchscreen-Gerät (Iphone 6s Plus) angeklickt sind, bleiben sie offen, es sei denn, ich aktualisiere die Seite.

meine Frage: Gibt es eine Möglichkeit, dass ich die halten kann: schweben Funktion auf nicht-Touch-Screen-Geräten, während gleichzeitig Touchscreen-Benutzer ermöglicht, das Element zu wechseln aus, indem Sie darauf klicken?

Ich weiß, wie man Javascript schreibt (mit onclick), um die Anzeige von Elementen durch Klicken ein-/auszuschalten, aber wenn ich dies tue, verliere ich meine: Hover-Fähigkeit. Ich frage mich, ob es eine Zeile Code gibt, die Folgendes tun wird: führen Sie die Onclick-Funktion nur dann aus, wenn das Gerät ein Touchscreen-Gerät ist.

Answer 1

You can use the following code to distinguish devices. Add you hover css with touch-enable. 

detectTouchEvent: function(){ 
jQuery.support.touch = 'ontouchend' in document; 
var $body = $("body"); 

if(jQuery.support.touch){ 
$body.addClass("touch-enable"); 
}else{ 
$body.addClass("touch-disabled") 
} 
}