Javascript Jquery.hide（）和.show（）在firefox上的速度变慢了，但在chrome上效果很好

我创建了一个包含子元素的树，为了在用户单击时隐藏和显示它们，我使用了.show（'fast'）和.hide（'fast'）jquery函数。 但我注意到，在firefox上，这两种状态之间的转换正在放缓，但在Chrome上，它的工作方式很有魅力

我有最新版本的firefox

您还应该知道，我在我的网站中使用了不同的库，如bootstrap、datatable.js。我之所以告诉你，是因为我发现codepen.io上的减速不如我的网站上的明显

这是我的javascript代码：

$('.tree li.parent_li > span').on('click', function(e) {
    var child = $(this).parent('li.parent_li').find(' > ul > li');
    if (child.is(":visible")) {
        child.hide('fast');
        $(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
    } else {
        child.show('fast');
        $(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
    }
    e.preventDefault();
    e.stopPropagation();
});

谢谢。

这是我的尝试：

$（函数（）{
$（'.tree li.parent_li>span'）。在（'click'，函数（e）{
var parent=$（this.nextest（'li.parent_li'）；
父类。切换类（“打开”）；
e、 预防默认值（）；
e、 停止传播（）；
});
});
.administrationRowTab{
背景色：#ffffff；
边框：1px实心rgba（0,0,0,0.12）；
盒影：0 1px 1px rgba（0,0,0,0.05）；
}
.选项卡窗格，
.主动{
颜色：继承；
}
/*树形*/
树胶{
列表样式：无；
}
.tree.parent\u li>span{
光标：指针；
}
.树一{
右边距：5px；
}
.parent_li.标志符号V形向下，
.parent_li.open.glyphicon V形符号右侧{
显示：无；
}
.parent_li.open.glyphion V形向下{
显示：内联块；
}
.家长{
身高：0；
溢出：隐藏；
-webkit过渡：所有500ms线性；
-moz过渡：所有500ms线性；
-o型过渡：所有500ms线性；
过渡：所有500ms线性；
}
.家长(李)公开考试{
高度：60px；
溢出：自动；
}






父1

儿童1
儿童2
儿童3



家长2

儿童1
儿童2
儿童3



这是我的尝试：


$（函数（）{
$（'.tree li.parent_li>span'）。在（'click'，函数（e）{
var parent=$（this.nextest（'li.parent_li'）；
父类。切换类（“打开”）；
e、 预防默认值（）；
e、 停止传播（）；
});
});
.administrationRowTab{
背景色：#ffffff；
边框：1px实心rgba（0,0,0,0.12）；
盒影：0 1px 1px rgba（0,0,0,0.05）；
}
.选项卡窗格，
.主动{
颜色：继承；
}
/*树形*/
树胶{
列表样式：无；
}
.tree.parent\u li>span{
光标：指针；
}
.树一{
右边距：5px；
}
.parent_li.标志符号V形向下，
.parent_li.open.glyphicon V形符号右侧{
显示：无；
}
.parent_li.open.glyphion V形向下{
显示：内联块；
}
.家长{
身高：0；
溢出：隐藏；
-webkit过渡：所有500ms线性；
-moz过渡：所有500ms线性；
-o型过渡：所有500ms线性；
过渡：所有500ms线性；
}
.家长(李)公开考试{
高度：60px；
溢出：自动；
}






父1

儿童1
儿童2
儿童3



家长2

儿童1
儿童2
儿童3



这是纯CSS。

我在css中添加了两个类：.chiled hide和.chiled show，并更新了js脚本：

这里有一个链接


$（函数（）{
$（'.tree li.parent_li>span'）。在（'click'，函数（e）{
var test=$（this.parent（'li.parent_li'）.hasClass（'chiled-hide'）；
如果（测试）
{
$（this.parent（'li.parent_li'）.removeClass（'chiled-hide'）.addClass（'chiled-show'）；
$（this）.find（'>i'）.addClass（'glyphicon-chevron-down'）.removeClass（'glyphicon-chevron-right'）；
}
其他的
{
$（this.parent（'li.parent_li'）.removeClass（'chiled-show'）.addClass（'chiled-hide'）；
$（this）.find（'>i'）.addClass（'glyphicon-chevron-right'）.removeClass（'glyphicon-chevron-down'）；
}
e、 预防默认值（）；
e、 停止传播（）；
});
});
.administrationRowTab{
背景色：#ffffff；
边框：1px实心rgba（0,0,0,0.12）；
盒影：0 1px 1px rgba（0,0,0,0.05）；
}
.选项卡窗格，.活动{
颜色：继承；
}
/*树形*/
树胶{
列表样式：无；
}
.tree.parent_li>span{cursor:pointer；}
.tree i{右边距：5px；}
.chiled hide>ul{
显示：无；
不透明度：0；
过渡：不透明度0.5s线性；
}
.chiled show>ul{
显示：块；
不透明度：1；
}






父1

儿童1