jQuery函數導致DoubleClick和不一致

Question

我有這個功能.....

$(document).ready(function() { 
    var state = false; 
    $(".navbtn").click(function() { 
     if(!state){ 
      $('#menu').multilevelpushmenu('expand'); 
      state = true; 
      $('.nav-toggle').addClass('active'); 
      $(this).removeClass('active'); 
     } 
     else{ 
      $('#menu').multilevelpushmenu('collapse'); 
      state = false; 
      $('.nav-toggle').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    }); 
}); 
//ALLOWS CLICK ON THE BODY TO CLOSE THE MENU// 
$('#colorscreen').click(function(){ 
     $('#menu').multilevelpushmenu('collapse'); 
     $('.nav-toggle').removeClass('active'); 
      $(this).addClass('active'); 
}); 

，讓身體上的點擊工作的一部分，做的一切，但在單擊DIV #colorscreen當它執行的功能，但當我嘗試再次使用navbtn打開菜單時，它需要雙擊。我錯過了一些東西，但不知道有人可以幫忙嗎？

...建議的前位，現在給我留下了這...

$(function() { // DOM ready shorthand 

    var state = false; 
    $(".navbtn").click(function() { 
     if(!state){ 
      $('#menu').multilevelpushmenu('expand'); 
      state = true; 
      $('.nav-toggle').addClass('active'); 
      $(this).removeClass('active'); 
     } 
     else{ 
      $('#menu').multilevelpushmenu('collapse'); 
      state = false; 
      $('.nav-toggle').removeClass('active'); 
      $(this).addClass('active'); 
     } 
    }); 
}); 
//ALLOWS CLICK ON THE BODY TO CLOSE THE MENU// 
$('#colorscreen').click(function(){ 
    $('#menu').multilevelpushmenu('collapse'); 
    state = false; 
    $('.nav-toggle').removeClass('active'); 
     $(this).addClass('active'); 

}）;

Answer 1

你可以試試這個：

$(document).ready(function() { 
    var $navToggle = $('.nav-toggle'); 
    $(".navbtn").click(function() { 
     if($navToggle.hasClass('active')){ 
      $('#menu').multilevelpushmenu('collapse'); 
      $navToggle.removeClass('active'); 
      $(this).addClass('active'); 
     } 
     else{ 
      $('#menu').multilevelpushmenu('expand'); 
      $navToggle.addClass('active'); 
      $(this).removeClass('active'); 
     } 
    }); 

    //ALLOWS CLICK ON THE BODY TO CLOSE THE MENU// 
    $('#colorscreen').click(function(){ 
     $('#menu').multilevelpushmenu('collapse'); 
     $('.nav-toggle').removeClass('active'); 
      $(this).addClass('active'); 
    }); 
}); 

Answer 2

希望這將幫助你解決你的神祕：

按照state變量值：

$(function() { // DOM ready shorthand 

    var state = false;  // initially set to false, all right for now 

    $(".navbtn").click(function() { 
    if(!state){   // if state is faulty... 
     state = true; 
     // do this 
    } else{    // else... 
     state = false; 
     // do that 
    } 
    }); 

    $('#colorscreen').click(function(){ // (P.S. I'm also inside DOM ready! Yey!) 
    // do something 
    // Hey, what about our state variable??? 
    // If clicking #colorscreen you want it all like "back to default" 
    // than probably you want to set `state` variable also back to `false` 
    }); 

}); 

如果你按照正確的上方。 ..
您的代碼現在應該如下所示：

$(function() { // DOM ready shorthand 

    var state = false;  // initially set to false, all right for now 

    $(".navbtn").click(function() { 
    if(!state){   // if state is faulty... 
     state = true; 
     // do this 
    } else{    // else... 
     state = false; 
     // do that 
    } 
    }); 

    $('#colorscreen').click(function(){ // (P.S. I'm also inside DOM ready! Yey!) 
    // do something 
    state = false; // back to false!!!! 
    }); 

}); // End of DOM ready.