Javascript JQuery幻灯片切换：可见条件

我的目标是一次只打开一个开关。为了实现这一点，我想检查一个切换是否可见，并创建一个条件语句来隐藏另一个当前打开的ID。但是，当我运行代码时，无论是否打开，它都返回false。我错过了什么

请只看js开头引用.base的代码，因为我没有为其他实例创建它，因为我无法让它工作

if（$（“.base、.protein、.toppings、.sauces、.extractoppings、.teas、.甜点”）是（“：visible”））{
$（“.base、.protein、.toppings、.sauces、.extra-toppings、.teas、.甜点”）.hide（）；
}
$（“#基”）。单击（函数（）{
$（“.bases”）.slideToggle（“慢”）；
如果（$（'.bases'）。是（':visible'））{
控制台日志（“可见”）；
}否则{
控制台日志（“不可见”）；
}
});
$（“#蛋白质”）。单击（函数（）{
$（“.protein”）.slideToggle（“slow”）；
});
$（“#浇头”）。单击（函数（）{
$（“.toppings”）。滑动切换（“慢速”）；
});
$（“#酱汁”）。单击（函数（）{
$（“.sauces”）。滑动切换（“慢”）；
});
$（“#外部浇头”）。单击（函数（）{
$（“.extractoppings”）。滑动切换（“慢速”）；
});
$（“#teas”）。单击（函数（）{
$（“.teas”）。滑动切换（“慢速”）；
});
$（“#甜点”）。单击（函数（）{
美元（“.desserts”）。滑动切换（“慢速”）；
});
html{
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
/*避免IE 10-11“最小高度”错误*/
}
.内容{
弹性：10自动；
/*防止Chrome、Opera和Safari让这些项目缩小到小于其内容的默认最小大小*/
填充：20px；
}
.页脚{
弹性收缩：0；
/*防止Chrome、Opera和Safari让这些项目缩小到小于其内容的默认最小大小*/
填充：20px；
}
a{
文字装饰：无；
颜色：白色；
}
* {
框大小：边框框；
}
身体{
保证金：0；
字体：16px无衬线；
}
h1{
利润率：0.20px0；
}
p{
利润率：0.20px0；
}
页脚{
背景#42A5F5；
颜色：红色；
}
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
运输署，
th{
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
tr:n个孩子（偶数）{
背景色：#dddddd；
}
ul，
李{
文字装饰：无；
列表样式：无；
利润率：3%；
利润底部：5%；
宽度：自动；
}
#菜单项{
显示器：flex；
宽度：自动；
利润率：0%；
利润底部：5%；
对齐项目：居中；
证明内容：中心；
背景：蓝色；
颜色：白色；
文本装饰：无。卡路里计算器主{
显示：无！重要；
}

帕德泰计算
帕德泰热量计算器

主菜
汤
茶
甜点

主菜
公司
联系
国
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
133
152
蛋白质
浇头
酱汁
额外浇头
茶
甜点
全部的
碳水化合物
无论您是打开还是关闭切换，在
中间转换状态期间（转换开始后）将始终可见，因此它总是返回true

但是，如果在调用slideToggle之前使用
。is（“：visible”）
，那么我们可以使用以下结构的函数：

$( "#bases" ).click(function() {
   var visibility = $('.bases').is(':visible');
   if(visibility){
      console.log ("not visible");
   }
   else {
      console.log ("visible")
   }
   $( ".bases" ).slideToggle( "slow");
});

现在，您可能会注意到该条件似乎有问题

为什么可见性变量设置为true时日志记录不可见？

这是因为正如我所说，在切换幻灯片之前或在过渡期间，您必须记录它。因此，当它实际上不可见时，您单击按钮，
它将记录可见内容并切换内容以显示，反之亦然


if（$（“.base、.protein、.toppings、.sauces、.extractoppings、.teas、.甜点”）是（“：visible”））{
$（“.base、.protein、.toppings、.sauces、.extra-toppings、.teas、.甜点”）.hide（）；
}
$（“#基”）。单击（函数（）{
变量可见性=$（'.bases'）。是（':visible'）；
如果（能见度）{
控制台日志（“不可见”）；
}否则{
控制台日志（“可见”）；
}
$（“.bases”）。滑动切换（“慢速”）；
});
$（“#蛋白质”）。单击（函数（）{
$（“.protein”）.slideToggle（“slow”）；
});
$（“#浇头”）。单击（函数（）{
$（“.toppings”）。滑动切换（“慢速”）；
});
$（“#酱汁”）。单击（函数（）{
$（“.sauces”）。滑动切换（“慢”）；
});
$（“#外部浇头”）。单击（函数（）{
$（“.extractoppings”）。滑动切换（“慢速”）；
});
$（“#teas”）。单击（函数（）{
$（“.teas”）。滑动切换（“慢速”）；
});
$（“#甜点”）。单击（函数（）{
美元（“.desserts”）。滑动切换（“慢速”）；
})；
html{
身高：100%；
}
身体{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
/*避免IE 10-11“最小高度”错误*/
}
.内容{
弹性：10自动；
/*防止Chrome、Opera和Safari让这些项目缩小到小于其内容的默认最小大小*/
填充：20px；
}
.页脚{
弹性收缩：0；
/*防止Chrome、Opera和Safari让这些项目缩小到小于其内容的默认最小大小*/
填充：20px；
}
a{
文字装饰：无；
颜色：白色；
}
* {
框大小：边框框；
}
身体{
保证金：0；
字体：16px无衬线；
}
h1{
利润率：0.20px0；
}
p{
利润率：0.20px0；
}
页脚{
背景#42A5F5；
颜色：红色；
}
桌子{
字体fam