jquery single click funktioniert nicht richtig - javascript, jquery

Ich habe es geschafft, das Attributelement von a zu entfernenListenelement, aber ich habe Mühe, Folgendes zu tun: Wenn ich auf ein Listenelement klicke, sollte es eine Klasse namens wichtig hinzufügen, andernfalls muss die Klasse nicht existieren.

Ich habe das mit jQuery versucht:

$(document).ready(function (){
var origHref = $("ul#primary-menu > li.menu-item-has-children > a").attr("href");
//alert(origHref);
var clicks = 0;
$("ul#primary-menu > li.menu-item-has-children > a").removeAttr("href").data("origHref",origHref);
$("ul#primary-menu > li.menu-item-has-children").click(function(){
clicks++;
if(clicks === 1){
$("ul#primary-menu > li.menu-item-has-children").addClass("important");
}
else if(clicks > 1){
alert("you clicked twice");
}
});
});

Problem: Wenn ich das Element überprüfe und zum ersten Mal auf die Liste klicke, passiert nichts. Erst wenn ich zum zweiten Mal klicke, wird die Klasse hinzugefügt.

HINWEIS: Ich möchte das nur für mobile Geräte tun, also brauchen Sie sich keine Sorgen um Bildschirme zu machen, die breiter als 800 Pixel sind.

Bitte helfen Sie.

Antworten:

Machen Sie eine if, die auf der Klasse basiert, die keine globale Variable ist, und verhindern Sie das standardmäßige Click-Ereignis:

  $("ul#primary-menu > li.menu-item-has-children").click(function(e) {
if ($(window).width() < 800) {
if (!$(e.target).closest("ul").is(".sub-menu")) {
e.preventDefault();
if (!$(this).hasClass("important")) {
$(this).addClass("important")
//toggle the menu
} else {
//redirect if second click
window.location = $(this).find("a").attr("href");
}
}
}
});