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

小提琴：http://jsfiddle.net/a0kscpa3/

Answer 1

正如我在评论中提到的，原始帖子中的第二个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更改切换按钮符号

3 个答案: