jQuery 更改切换按钮符号

Question

我有这样的情况：我有一个菜单，它只显示，然后单击按钮。一切正常，除非在菜单打开后，我希望它关闭。按钮符号未更改并停留在 "close"。我做错了什么？

    $(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

正如我在评论中提到的，原始 post 中的第二个 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 2

    $(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');
            }
        });


    });

Answer 3

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

看看这个jsFiddle

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

还有jQuery stop()功能用来防止用户多次点击时动画排队

jQuery 更改切换按钮符号

jQuery changing toggle button symbols

jquery

html

css

toggle