我的手機菜單Jquery腳本只運行一次

嗨我是新來的jquery，只是試圖把一個簡單的腳本一起顯示/隱藏我的手機菜單點擊。它工作正常，但它只能工作一次，直到你刷新你的瀏覽器。我的手機菜單Jquery腳本只運行一次

的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; 
    } 
}

來源

2016-04-22 Ben Anderson

這是因爲你定義多個點擊事件

這應該工作

$(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"); 
      } 

     }); 
    });

來源

2016-04-22 11:31:29

宣佈多的onclick事件贏「T工作，並將被最後一個覆蓋。您可以通過檢查你的類是否存在與否

$(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"); 
     } 
    }); 
});

來源

2016-04-22 11:40:34

你試過toggleClass做所有這些事情上的onclick回調？

$('.menutrigger').click(function (e) { 
    $('.demo').toggleClass("hidenav"); 
});

它會將您的代碼壓縮到1行。

看看this fiddle

爲了更多地瞭解.toggleClass（）。請參閱jQuery API doc

來源

2016-04-22 11:52:13

謝謝你我會研究這個 –

我的手機菜單Jquery腳本只運行一次

回答

相關問題