Javascript Jquery幻灯片菜单切换

我试图用jquery构建一个滑入/滑出导航菜单，但遇到了一个问题。如果我点击“fa bars”图标，那么一切都会顺利进行。但是，当我单击“固定资产时间”图标关闭导航菜单（我希望它这样做）时，它会根据需要工作，但“固定资产栏”图标不再可单击以重新打开菜单。我知道这与我的JS代码有关，但我就是无法破解它

正文{
溢出x：隐藏；
}
保险商实验室{
列表样式：无；
边际上限：0px；
填充：0；
}
李{
字体大小：30px；
颜色：黑色；
}
.fa酒吧{
位置：静态；
左：100px；
顶部：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa条：悬停{
不透明度：0.7；
}
.fa时代{
位置：绝对位置；
顶部：5px；
右：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa次：悬停{
不透明度：0.7；
}
导航{
背景颜色：浅灰色；
宽度：250px；
位置：固定；
排名：0；
底部：0；
z指数：1；
转换：translate3d（-250px，0，0）；
过渡：所有0.5s缓进缓出；
}
.主动导航{
变换：translate3d（0,0,0）；
}
.封闭式导航{
转换：translate3d（-250px，0，0）；
}

新手
临街
雅致的
运动的

JS:
$（函数（）{
$（'.fa条'）。单击（函数（）{
$（'nav'）.toggleClass（'active-nav'）；
});
$（'.fa times'）。单击（函数（）{
$（'.active-nav'）.toggleClass（'closed-nav'）；
});
});单击关闭按钮时问题开始出现

$（'.active-nav'）.toggleClass（'closed-nav'）

使用上述代码，您将
关闭的导航
添加到
导航
，导航将关闭。。。在那之后你使用

$('nav').toggleClass('active-nav'); 

使用上述代码，您可以在
关闭导航
仍处于打开状态时，从
导航
中删除
活动导航

因此，您需要删除
关闭导航
类并添加
活动导航

要解决这个问题，您可以使用

$('nav').removeClass('closed-nav').addClass('active-nav');

而不是

$('nav').toggleClass('active-nav');


$（函数（）{
$（'.fa条'）。单击（函数（）{
$（'nav'）.removeClass（'closed-nav'）.addClass（'active-nav'）；
});
$（'.fa times'）。单击（函数（）{
$（'.active-nav'）.toggleClass（'closed-nav'）；
});
});
正文{
溢出x：隐藏；
}
保险商实验室{
列表样式：无；
边际上限：0px；
填充：0；
}
李{
字体大小：30px；
颜色：黑色；
}
.fa酒吧{
位置：静态；
左：100px；
顶部：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa条：悬停{
不透明度：0.7；
}
.fa时代{
位置：绝对位置；
顶部：5px；
右：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa次：悬停{
不透明度：0.7；
}
导航{
背景颜色：浅灰色；
宽度：250px；
位置：固定；
排名：0；
底部：0；
z指数：1；
转换：translate3d（-250px，0，0）；
过渡：所有0.5s缓进缓出；
}
.主动导航{
变换：translate3d（0,0,0）；
}
.封闭式导航{
转换：translate3d（-250px，0，0）；
}


新手
临街
雅致的
运动的

单击关闭按钮时问题开始出现

$（'.active-nav'）.toggleClass（'closed-nav'）

使用上述代码，您将
关闭的导航
添加到
导航
，导航将关闭。。。在那之后你使用

$('nav').toggleClass('active-nav'); 

使用上述代码，您可以在
关闭导航
仍处于打开状态时，从
导航
中删除
活动导航

因此，您需要删除
关闭导航
类并添加
活动导航

要解决这个问题，您可以使用

$('nav').removeClass('closed-nav').addClass('active-nav');

而不是

$('nav').toggleClass('active-nav');


$（函数（）{
$（'.fa条'）。单击（函数（）{
$（'nav'）.removeClass（'closed-nav'）.addClass（'active-nav'）；
});
$（'.fa times'）。单击（函数（）{
$（'.active-nav'）.toggleClass（'closed-nav'）；
});
});
正文{
溢出x：隐藏；
}
保险商实验室{
列表样式：无；
边际上限：0px；
填充：0；
}
李{
字体大小：30px；
颜色：黑色；
}
.fa酒吧{
位置：静态；
左：100px；
顶部：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa条：悬停{
不透明度：0.7；
}
.fa时代{
位置：绝对位置；
顶部：5px；
右：10px；
光标：指针；
过渡：所有0.5s缓进缓出；
}
.fa次：悬停{
不透明度：0.7；
}
导航{
背景颜色：浅灰色；
宽度：250px；
位置：固定；
排名：0；
底部：0；
z指数：1；
转换：translate3d（-250px，0，0）；
过渡：所有0.5s缓进缓出；
}
.主动导航{
变换：translate3d（0,0,0）；
}
.封闭式导航{
转换：translate3d（-250px，0，0）；
}


新手
临街
雅致的
运动的

您的事件处理程序被正确调用，但您切换了错误的类，下面修复了该问题

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('active-nav');
});

您的事件处理程序被正确调用，但是您切换了错误的类，下面修复了该问题

$('.fa-bars').click(function () {
    $('nav').toggleClass('active-nav');
});

$('.fa-times').click(function() {
    $('.active-nav').toggleClass('active-nav');
});