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

您始终可以通过简化函数来整理 JS，这样就没有条件语句或多个点击事件。

看看这个jsFiddle

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

还有 jQuery stop()函数用于防止用户多次点击时动画排队。