Javascript 滑动切换与显示不一致

我制作了一个简单的系统，允许我在切换面板中显示信息。我的问题是滑动切换“有时”将面板的显示错误地切换为块，有时切换为正确的css集合内联块

我看到的大多数答案都说，在滑动切换后只设置显示类型，但这会导致动画中出现不规则的外观变化

$（文档）.ready（函数（）{
//隐藏所有div容器
$（“#可折叠面板div.yanswer”）.hide（）；
//将click事件附加到a元素
$（“#可折叠面板a”）。单击（功能（e）{
//查找单击对象的类，仅第一个类，因为它是我们最初设置的对象
var cN=$（this.attr（'class'）.split（''）[0]；
//如果有一个选项卡对应的类处于活动状态，我们将关闭它并将其切换为关闭。
if（$（this）.nextAll（“#可折叠面板div.+cN+.active”）.length！=0）{
$（this）.nextAll（“#可折叠面板分区.+cN）.first（）.slideToggle（）；
$（this）.nextAll（“#可折叠面板分区.+cN）.first（）.toggleClass（'active'）；
$（this.toggleClass（'tabbed'）；
e、 预防默认值（）；
}
//如果没有打开的选项卡，请查找具有相应类的对象并将其打开，然后切换为活动状态。
否则，如果（$（此）.nexthill（'\35;可折叠面板div.active'）。length==0）{
$（this）.nextAll（“#可折叠面板分区.+cN）.first（）.slideToggle（）；
$（this）.nextAll（“#可折叠面板分区.+cN）.first（）.toggleClass（'active'）；
$（this.toggleClass（'tabbed'）；
e、 预防默认值（）；
}
//否则，基本上，如果某个选项卡处于打开状态，而该选项卡不是我们选择的选项卡，则找到要打开的选项卡，关闭所有其他选项卡，设置为非活动，然后打开/激活所选选项卡。
否则{
$（this）.nextAll（“#可折叠面板div.”+cN）.first（）.preval（“#可折叠面板div.active”）.slideToggle（）；
$（this）.nextAll（“#可折叠面板div.”+cN）.first（）.prevAll（“#可折叠面板div.active”）.toggleClass（'active'）；
$（this）.nextAll（'#可折叠面板div.+cN）.first（）.nextAll（'#可折叠面板div.active'）.slideToggle（）；
$（this）.nextAll（“#可折叠面板div.”+cN）.first（）.nextAll（“#可折叠面板div.active”）.toggleClass（'active'）；
$（this）.nextAll（'#可折叠面板div.+cN）.first（）.delay（500）.slideToggle（）；
$（this）.nextAll（“#可折叠面板分区.+cN）.first（）.toggleClass（'active'）；
$（this.toggleClass（'tabbed'）；
$（this）.nextAll（“#可折叠面板a.tabbed”）.toggleClass（'tabbed'）；
$（this）.preval（“#可折叠面板a.tabbed”）.toggleClass（'tabbed'）；
e、 预防默认值（）；
}
});
});
.tabs{
利润率：4%；
文本对齐：居中；
}
.标签a{
空白：nowrap；
垂直对齐：中间对齐；
显示：内联块；
文字装饰：无；
填料：15px 25px；
边际：0px；
背景：#CE1F24；
颜色：#FFF；
边界半径：15px；
边框：实心1px#C00000；
文本阴影：0-1px0RGBA（0,0,0,0.4）；
盒影：插入0 1px4pRGBA（0,0,0,0.6）；
}
.a:悬停{
背景：#B80000；
边框：实心1px#880000；
文字装饰：无；
边框底宽：0px；
}
.选项卡a：焦点{
大纲：无；
}
.标签{
框阴影：插入0 1px 0 rgba（255，255，255，0.4），0 1px 1px rgba（0，0，0.2）；
背景：#587CAF；
边框：实心1px#587CAF；
边框底宽：0px；
}
.选项卡a：活动{
框阴影：插入0 1px 0 rgba（255，255，255，0.4），0 1px 1px rgba（0，0，0.2）；
背景：#587CAF；
边框：实心1px#587CAF；
边框底宽：0px；
}
.tabs yanswer分区{
垂直对齐：中间对齐；
显示：内联块；
填充：20px 60px；
边缘顶部：5px；
背景：#FFF；
颜色：#000；
边界半径：40px；
边框：实心4px#587CAF；
z指数：10；
}
.tabs分区yanswer p{
字号：3em；
宽度：自动；
}
.tabs yanswer ul分区{
字体大小：1.3em；
}
.tabs div.yanswer p.smallfont{
字号：1em；
}



如果你领导一个项目，你可以




向管理层展示你的能力
做决定
添加到你的简历中
*挣钱或休假*



*符合6周以上周转期的任务要求
如果你帮助一个项目，你可以




向管理层展示你的能力
学习新东西
帮助做决定
添加到你的简历中

我找到了自己问题的答案。使用hack修复程序，即在切换后将显示设置为inline block，我注意到它只需应用一次，然后slideToggle（）将正确地在display:none和display:inline block之间切换

我认为问题在于my.hide（）在css将面板设置为内联块之前将面板显示设置为“无”，因此slideToggle（）不知道使用什么默认显示，而是恢复为“块”。我通过添加$（'#可折叠面板div.yanswer'）.css（'display'，'inline block'）修复了这个问题；在我的.hide（）之前。这确保了slideToggle（）知道它们应该是内联块。
请缩短您的帖子，并说明更具可读性的基本问题好吗？另外
这也是我的第一篇帖子，如果我做错了什么，我道歉。
没有必要。所以我知道这是你的第一篇帖子；）