jQuery更改切换按钮符号

我有这样的情况：我有一个菜单，它只显示出来，然后点击按钮。一切正常，除了菜单打开后，我希望它关闭。按钮符号没有变化，并卡在“关闭”上。我做错了什么

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

---

小提琴：

正如我在评论中提到的，您在原始帖子中的第二个

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

});

---

您可以通过简化函数来整理JS，这样就不会有条件语句或多次单击事件

看看这个

---

该功能还用于防止用户多次单击时动画排队。

不需要单独的单击事件。定义click事件并将if条件添加到其中。

$（'.menu button'）。在（'click'，function（）{

上甚至没有被调用。发出警报，您将看到它没有被调用。无法编辑我的上述注释。。因此这里提到。。我想说的是“第二个”

$（'.menu button'）。在（'click'，function（）{

将永远不会被调用。。

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


    });

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