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.

导致双击和不一致的jquery函数

2 个答案: