如何将 show() 和 hide() jquery 函数应用于 css 显示 属性

Question

我的项目有一个侧边菜单。我没有使用 bootstrap 模板。出于学习目的，我正在开发自己的侧边菜单。

现在发生的是显示和隐藏菜单，我正在使用 jquery hide() 和 show() 函数。

但是这样做会使菜单在隐藏或显示时看起来有点奇怪。 例如你可以看到这个 fiddle（延迟故意设置为 2s，以便你可以观察到奇怪的变化）。 https://jsfiddle.net/6v25oggm/3/

谁能帮我解决这个问题？

Answer 1

您应该使用 slideUp 和 slideDown。

虽然 slide 函数仅影响元素的高度，但 show/hide 函数同时影响高度和宽度。

查看this fiddle的实际操作

Answer 2

使用 slideToggle 和一些用于检查 a 旁边是否有子菜单的简单逻辑可以大大减少您的代码。

请查看此 fiddle：https://jsfiddle.net/vxaoryg3/2/

Answer 3

使用tigerdi的建议和trichetriche的解决方案（实施）

已更新

$('.sidebar-menu li').click(function(e) 
{
    e.stopPropagation();
    $(this).siblings().find('.sidebar-sub-menu').slideUp();
    $(this).find('.sidebar-sub-menu').slideToggle();
});