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.