Javascript 导航栏滑出-不加载动画

我正在尝试从左侧制作一个带有滑动动画的菜单。但它不会加载动画，也不会关闭或打开，而是保持正常菜单。 这是我的代码，如下所示

• javascript
• -css
• -html:

$（文档）.ready（函数（）{
$（“.fa次”）。单击（函数（）{
$（“.sidebar menu”）.addClass（“隐藏菜单”）；
$（“.toggle menu”）.addClass（“不透明一号”）；
});
$（“.fa次”）。单击（函数（）{
$（“.sidebar menu”）.removeClass（“隐藏菜单”）；
$（“.toggle menu”）.removeClass（“不透明一号”）；
});
})

*{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
}
.fa时代{
右：10px；
顶部：10px；
不透明度：0.7；
光标：指针；
位置：绝对位置；
颜色：白色；
过渡：所有0.2秒缓进缓出；
}
.fa次：悬停{
不透明度：1；
}
.侧边栏菜单{
位置：固定；
宽度：250px；
左边距：0px；
溢出：隐藏；
高度：100vh；
最大高度：100vh；
背景色：rgba（17,17,17,0.9）；
不透明度：0.9；
过渡：所有0.3秒的缓进缓出；
}
.隐藏菜单{
左边距：-250px；
过渡：所有0.3秒的缓进缓出；
}
.切换菜单{
位置：固定；
填充：15px 20px 15px 15px；
利润上限：70像素；
颜色：白色；
光标：指针；
背景色：#648B79；
不透明度：0；
z指数：10000；
字号：2em；
过渡：所有0.2秒缓进缓出；
}
1.不透明度{
不透明度：1；
过渡：所有0.2秒缓进缓出；
}
.切换菜单：悬停{
背景色：#FE4365；
过渡：所有0.2秒缓进缓出；
}
.盒装物品{
字体系列：“开放式SAN”；
字号：200；
填充：10px 20px；
显示：内联块；
边框：纯色2px白色；
框大小：边框框；
字体大小：29px；
颜色：白色；
文本对齐：居中；
利润上限：70像素；
}
.标志粗体{
字号：800；
}
.标志名称{
颜色：白色；
字体系列：“开放式SAN”；
字号：200；
字体大小：20px；
文本对齐：居中；
填充：5px0；
}
.菜单关闭{
颜色：#D8D8D8；
位置：绝对位置；
右：8px；
不透明度：0.7；
顶部：6px；
字体大小：1.1米；
过渡：所有0.3秒的缓进缓出；
光标：指针；
}
.菜单关闭：悬停{
颜色：#FE4365；
不透明度：1；
过渡：所有0.2秒缓进缓出；
}
.导航科{
利润率：20px0；
显示：块；
宽度：200px；
左边距：25px；
}
.导航项{
字号：200；
字体系列：“开放式SAN”；
颜色：白色；
填充：12px 0px；
框大小：边框框；
字体大小：14px；
颜色：#D8D8D8；
边框底部：实心1px#d8d8；
过渡：所有0.3秒的缓进缓出；
光标：指针；
}
.导航项：悬停{
颜色：白色；
过渡：所有0.3秒的缓进缓出；
}
.盒装小件{
字体大小：12px；
颜色：#D8D8D8；
宽度：200px；
过渡：所有0.3秒的缓进缓出；
光标：指针；
边框宽度：1px；
利润率：0.20px0；
}
.盒装物品较小：悬停{
背景色：白色；
颜色：#111；
过渡：所有0.3秒的缓进缓出；
}
.隐藏菜单{
左边距：-250px；
}
1.不透明度{
不透明度：1；
转换：所有0.3秒的轻松输入输出；
}

咖啡笔记

您添加了两个单击事件，一个添加类，另一个再次删除。所以点击不会改变任何事情。以下是您应该如何做到这一点：

var hide = false;
$(document).ready(function(){
    $(".fa-times").click(function(){
        if (!hide) {
            hide = true;
            $(".sidebar-menu").addClass("hide-menu");
            $(".toggle-menu").addClass("opacity-one");
        } else {
            hide = false;
            $(".sidebar-menu").removeClass("hide-menu");
            $(".toggle-menu").removeClass("opacity-one");
        }
    });
})

---

我为您修复了代码
您还可以使用

toggleClass

，因为您已经在使用

jquery

而不是

addClass

和

removeClass

$(".fa-bars").on("click",function(){
        $(".sidebar-menu").toggleClass("hide-menu");
        $(".toggle-menu").toggleClass("opacity-one");
    });

    $(".fa-times").on("click",function(){
        $(".sidebar-menu").toggleClass("hide-menu");
        $(".toggle-menu").toggleClass("opacity-one");
    });

---

这是代码笔链接，非常感谢！我用过了，很管用。但现在，当我单击隐藏它时，它会隐藏，但不会再次显示。我该怎么办？