Javascript 切换函数不工作-Jquery

我有一个有趣的问题。我收到了一个函数的帮助，该函数在单击菜单触发器后，检查类是否已添加到div中，然后显示或淡出。问题是该函数似乎只运行一次

下面是我制作的片段

$（函数（）{
$（'.trigger'）。单击（函数（）{
if（$（'.mainNav'）.hasClass（'showMainNav'））{
$（'.mainNav'）.fadeOut（100，function（）{
$（'.mainNav'）.removeClass（'showMainNav'）；
});
}否则{
$（'.mainNav'）.addClass（'showMainNav'）；
}
});
});
nav{
高度：70像素；
宽度：100%；
背景色：#ccc；
位置：固定；
排名：0；
左：0；
背景色：透明；
z指数：1000；
}
.导航固定宽度{
宽度：95vw；
身高：继承；
保证金：0自动；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
背景色：继承；
}
.标志和触发器{
显示器：flex；
证明内容：之间的空间；
}
.标志{
自对准：居中；
}
.扳机{
显示：无；
}
mainNav先生{
显示器：flex；
左边距：自动；
列表样式：无；
溢出：隐藏；
z指数：1000；
}
.mainNav>li{
填充：23px 14.6px；
框大小：边框框；
&：第n个孩子（6）{
右边填充：0；
}
}
.mainNav>li>a{
@扩展.navText；
文字装饰：无；
}
@媒体屏幕和屏幕（最大宽度：1046px）{
.标志和触发器{
宽度：100%；
}
.扳机{
显示器：flex；
自对准：居中；
颜色：黑色；
.fa.fa-bar{
字体大小：35px；
颜色：#ccc；
}
}
mainNav先生{
宽度：100%；
左：0；
位置：绝对位置；
顶部：70像素；
宽度：100vw；
高度：100vw；
弯曲方向：立柱；
填充顶部：137px；
背景色：白色；
显示：无；
}
.showMainNav{
显示：块；
}
.mainNav>li{
左侧填充：0；
左边距：0；
文本对齐：居中；
垫底：10px；
}    
.mainNav>li>a{
字号：21px；
颜色：rgb（102160253）；
字体大小：正常；
线高：28px；
文字装饰：无；
} 
}

这里有logo








使用以下代码：

$('.trigger').click(function() {
            if( $('.mainNav').hasClass('showMainNav')) {
                $('.mainNav').removeClass('showMainNav');
            } else {
                $('.mainNav').addClass('showMainNav');
            }
        });

使用现有的jquery函数，而不是为类编写切换代码

演示：
使用
fadeOut
添加CSS属性
“display:none”
。如果要保留动画，需要执行以下操作

$(function() {

 $('.trigger').click(function() {
    if( $('.mainNav').hasClass('showMainNav')) {
        $('.mainNav').fadeOut(100, function() {
            $('.mainNav').removeClass('showMainNav');
        });
    } else {
        $('.mainNav').addClass('showMainNav').css("display","");
    }
 });
});

jQuery淡出方法将在内联css上生成display:none。请记住，内联css比类定义的强大

您可以使用下面的代码

$(function() {    
    $('.trigger').click(function() {
        if( $('.mainNav').hasClass('showMainNav')) {
            $('.mainNav').fadeOut(100, function() {
                $('.mainNav').removeClass('showMainNav');
            });
        } else {
            $('.mainNav').fadeIn(100, function() {
                $('.mainNav').addClass('showMainNav');
            });
        }
    });
});

或者简单地使用jQuery切换方法

$(function() {
    $('.trigger').click(function() {
        $('.mainNav').toggle();
    });
});

您已经在媒体查询中定义了
showMainNav
class.@bhansa--。1046px出现一个小汉堡包菜单，然后是常规的。mainNav显示：无，并进行一系列其他更改
fadeOut（）
隐藏元素，因此当您再次添加类时，它仍然隐藏。您需要添加
fadeIn（）
或
.show（）
重新添加类时。如果您删除所有css并在代码段中的
fa-
图标上放置一些文本，会更清晰。问题是我希望显示：block是第一个操作，然后在删除时淡出。将显示：block作为css中的默认值，然后切换。这成功了！非常感谢你。
$(function() {
    $('.trigger').click(function() {
        $('.mainNav').toggle();
    });
});