slideToggle的文本和背景之间的时间延迟

Question

我正在使用jQuery slideToggle来创建左侧导航。但问题是，当我显示隐藏的内容时，背景缓慢向下滑动，文本会更快地出现。因此，文本会在其他内容的顶部显示几秒钟。

附加jsfiddle链接

中的演示和代码

$(document).on("click", ".has-subitem", function () {
     $(this).next(".submenu").slideToggle();
     $(this).find('i').toggleClass("fa-caret-right fa-caret-down");
});

Answer 1

在css中使用溢出的简单方法

.navi-list-multi-tabs > li {
    width: 100%;
    overflow: hidden;
}

Answer 2

将你的内容保存在div中，然后滑动该div，即。 $（ 'DIV＃标识'）的slideToggle（）;

Answer 3

简单。我想这可行。

$(document).on("click", ".has-subitem", function () {
     $(this).next(".submenu").slideToggle().parents('.has-subitem').find('i').toggleClass("fa-caret-right fa-caret-down");
});

因为，jQuery不会等待任何操作完成，除了它后面跟着下一个动作或它在ajax中。