Question

我的老板想为我们的网站设置一个可折叠的侧栏，我已设法提出一个..但是，她发现它在导航过程中很烦人（或当页面被刷新时）侧栏不断重新加载，并且因此具有折叠和扩展（“闪烁”）效果的快速运动。是否可以在保留侧杆可折叠/可扩展功能的同时摆脱它？

链接：http://2ddige.com/temps/Services/proteomics%202d_dige.html

PS：她希望扩展状态下的默认值，而不是崩溃状态。

Code:
// Appear/Disappear
            $('#menu4 > li > a.expanded + ul').show();
            $('#menu4 > li > a').click(function() {
                       $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
            });
            $('#example4 .expand_all').click(function() {
                $('#menu4 > li >   a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
            });
            $('#example4 .collapse_all').click(function() {
                $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
            });

Answer 1

删除第一行，包括.show（），然后将其添加到CSS：

#menu4 > li > a.expanded + ul {
    display: block;
}

或将其添加到每个ul元素中：

<ul style="display: block;">

您所遇到的内容被称为FOUC，尽管该wiki没有提到在使用javascript页面加载或domcontentloaded样式化元素时也会发生FOUC。

如何摆脱可折叠菜单的“闪烁”重新加载效果？

1 个答案: