Javascript 在Firefox中失败

嗨，我想把这段代码放在我的网站上，但是当我尝试点击Firefox中的菜单按钮时，它会弹出，然后背景颜色从正常的颜色变为白色（或者消失了）

$（'.toggle menu'）。单击（函数（e）{
e、 预防默认值（）；
$（'h4.toggle menu'）.text（$（this.text（）=='menu'？'Close'：'menu'）；
$（'.circle'）.toggleClass（'Opacity'）；
$（'#覆盖菜单'）。延迟（5000）。切换类（'Opacity'）；
$（'.circle'）.toggleClass（'open'）；
});
html，正文{
身高：100%；
}
身体{
背景：#fffdee；
}
.圆圈{
位置：固定；
前-50%；
左-50%；
身高：50%；
宽度：50%；
边界半径：50%；
背景#98694d；
不透明度：0；
-webkit转换持续时间：0.5s；
-webkit转换属性：全部；
-webkit转换计时功能：轻松输入输出；
过渡：所有0.5s缓进缓出；
z指数：1；
}
.打开{
前-50%；
左-50%；
宽度：200%；
身高：200%；
}
#覆盖菜单{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
文本对齐：居中；
颜色：黑色；
不透明度：0；
z指数：4；
}
h4.切换菜单{
位置：固定；
顶部：20px；
右：70px；
颜色：黑色；
光标：指针；
z指数：5；
}
.不透明度{
不透明度：1！重要；
能见度：可见；
}

菜单
我的内容
这是有效的：（在.open类中做了一些小更改（增加了不透明度）），并删除了JS中的一行。在Firefox和Chrome中测试


$（'.toggle menu'）。单击（函数（e）{
e、 预防默认值（）；
$（'h4.toggle menu'）.text（$（this.text（）=='menu'？'Close'：'menu'）；
//$（'.circle'）.toggleClass（'Opacity'）；
$（'#覆盖菜单'）。延迟（5000）。切换类（'Opacity'）；
$（'.circle'）.toggleClass（'open'）；
});
html，正文{
身高：100%；
}
身体{
背景：#fffdee；
}
.圆圈{
位置：固定；
前-50%；
左-50%；
身高：50%；
宽度：50%；
边界半径：50%；
背景#98694d；
不透明度：0；
-webkit转换持续时间：0.5s；
-webkit转换属性：全部；
-webkit转换计时功能：轻松输入输出；
过渡：所有0.5s缓进缓出；
z指数：1；
}
.打开{
前-50%；
左-50%；
宽度：200%；
身高：200%；
不透明度：1；
}
#覆盖菜单{
位置：固定；
排名：0；
左：0；
身高：100%；
宽度：100%；
文本对齐：居中；
颜色：黑色；
不透明度：0；
z指数：4；
}
h4.切换菜单{
位置：固定；
顶部：20px；
右：70px；
颜色：黑色；
光标：指针；
z指数：5；
}
.不透明度{
不透明度：1！重要；
能见度：可见；
}

菜单
我的内容
在firefox 52/54中的工作原理与任何其他浏览器相同
它会弹出
-弹出什么？如果你试图打开菜单，棕色背景会在动画中显示，但随后会隐藏。我很抱歉-它在firefox 54中有效，但在firefox 52中无效（我必须在firefox 54中测试过两次！）-很明显firefox中出现了行为变化。你提到的是firefox，而不是其他浏览器。这是否意味着该代码可以在Chrome、IE等浏览器中使用。？