jQuery изменение символов кнопки переключения

Question

У меня есть такая ситуация: у меня есть меню, и оно только отображается, затем нажимается кнопка. Все работает нормально, за исключением того, что после того, как меню открыто, я хочу, чтобы он закрылся. Символ кнопки не изменяется и застревает «закрыть». Что я сделал не так?

$(document).ready(function() { 
    $(".menu-button").click(function() { 
     $(".first-page nav").slideToggle(500); 
    }); 
    if ($('.menu-button').hasClass("menu-open")) { 
     $('.menu-button').on('click', function() { 
      $(this).removeClass('menu-open'); 
      $(this).addClass('menu-close'); 
     }); 
    } 
    if ($('.menu-button').hasClass("menu-close")) { 
     $('.menu-button').on('click', function() { 
      $(this).removeClass('menu-close'); 
      $(this).addClass('menu-open'); 
     }); 
    } 
}); 

Fiddle: http://jsfiddle.net/a0kscpa3/

Answer 1

Вы могли всегда опрятный, ИС вверх, упрощая функцию, так что нет никаких условных операторов или нескольких событий нажмите.

Взгляните на эту jsFiddle

$('.btn').on('click',function(e){ 
    e.preventDefault(); 
    $('.menu').stop().slideToggle(); 
    $(this).toggleClass('menu-open'); 
}); 

Также функция jQuery stop() используется для предотвращения анимации из в очередь, когда пользователь нажимает несколько раз.

Answer 2

Как я уже говорил в комментариях, Ваше второе if состояния в исходном сообщении никогда не будет называться. И, как сказал @Tyr, вам необходимо применить условие, как это,

$(document).ready(function() { 
    $(".menu-button").click(function() { 
     $(".first-page nav").slideToggle(500); 
    }); 

    $('.menu-button').on('click', function() { 

     if ($('.menu-button').hasClass("menu-open")) { 

      $(this).removeClass('menu-open'); 
      $(this).addClass('menu-close'); 
     } 
     else if ($('.menu-button').hasClass("menu-close")) { 
      $(this).removeClass('menu-close'); 
      $(this).addClass('menu-open'); 
     } 
    }); 

}); 

Answer 3

$(document).ready(function(){ 
     var flag= false; 
     $(".menu-button").click(function(){ 
      $(".first-page nav").slideToggle(500); 
      if(flag==false){ 
       flag = true; 
       $(this).removeClass('menu-open'); 
       $(this).addClass('menu-close'); 
      }else{ 
       flag = false; 
       $(this).removeClass('menu-close'); 
       $(this).addClass('menu-open'); 
      } 
     }); 


    });