Mein mobiles Menü Jquery-Skript läuft nur einmal

Question

Hallo, ich bin neu in jquery und versuche nur ein einfaches Skript zusammenzustellen, um mein mobiles Menü beim Klicken anzuzeigen/auszublenden. Es funktioniert jedoch gut, es funktioniert nur einmal, bis Sie Ihren Browser aktualisieren.

JQuery:

$(document).ready(function() { 
    //your code here 
    $(".nav").addClass("hidenav"); 
    $(".menutrigger").click(function() { 
     $(".nav").removeClass("hidenav").addClass("slidenav"); 

$(".menutrigger").click(function() { 
     $(".nav").removeClass("slidenav").addClass("hidenav"); 
     }); 

     }); 
}); 

CSS:

@media (max-width: 767px) { 
    .slidenav { 
     display: block; 
    } 
    .hidenav { 
     display: none; 
    } 
} 

Answer 1

Es ist, weil Sie mehrere Klick-Ereignisse

Diese definieren sollten mehrere onClick Ereignisse

$(document).ready(function() 
    { 
     //your code here 
     $(".nav").addClass("hidenav"); 
     var flag = 0; 
     $(".menutrigger").click(function() 
     { 
      if(flag == 0) 
      { 
       flag = 1; 
       $(".nav").removeClass("hidenav").addClass("slidenav"); 
      } 
      else 
      { 
       flag = 0; 
       $(".nav").removeClass("slidenav").addClass("hidenav"); 
      } 

     }); 
    }); 

Answer 2

erklärt arbeiten gewonnen t arbeiten und werden vom letzten überschrieben. Sie kann durch Überprüfung all diese Dinge in auf Onclick Rückruf tun, ob Ihre Klasse ist oder nicht

$(document).ready(function() { 
    //your code here 
    $(".nav").addClass("hidenav"); 
    $(".menutrigger").click(function() { 
     if ($(".nav").hasClass("hidenav")){ 
      $(".nav").removeClass("hidenav").addClass("slidenav"); 
     } else if ($(".nav").hasClass("slidenav")){ 
      $(".nav").removeClass("slidenav").addClass("hidenav"); 
     } 
    }); 
}); 

Answer 3

Haben Sie toggleClass versucht?

es wird Ihren Code auf nur 1 Zeile komprimieren.

haben einen Blick auf this fiddle

Um mehr über .toggleClass wissen(). siehe die jQuery API doc