Question

我正在使用侧边栏菜单实现，但在页面加载时，我最终会在菜单消失前看到菜单片刻。除了短暂闪烁的时刻，其他一切都按照预期的方式运作。

所以我的目标是消除菜单列表项的简短外观。为此，我提出了这个0px的想法。

请参阅下面我将其标记为right:0px; //this used to be 320. But making it 0px, eliminates the flash! )行的位置。

但是，当然，这个修复引入了另一个问题......当我与它交互时没有看到菜单的问题，例如点击一些应该显示更深层次的项目......

无论如何，在这里，我想我需要能够将right:0px设置回right:320px，但我需要在JQuery分支中这样做......我该怎么做？

这样，在页面加载时，0px规则..但是当dom加载时，我们可以重新打开320px。

以下是与此问题相关的具体代码：

我在头部有这种风格......

html.mm-right.mm-opening .mm-page, 
html.mm-right.mm-opening #mm-blocker, 
html.mm-right.mm-opening .mm-fixed-top, 
html.mm-right.mm-opening .mm-fixed-bottom {
    right: 0px;  //this used to be 320. But making it 0px, eliminates the flash! ) 
}

我在页脚上有这个jQuery init：

//右边的菜单

jQuery(function() {

    var $menu = jQuery('nav#menu-right');

    $menu.mmenu({
        position    : 'right',
        classes     : 'mm-light',
        dragOpen    : true,
        counters    : true,
        searchfield : true,
        labels      : {
            fixed       : !jQuery.mmenu.support.touch
        },
        header      : {
            add         : true,
            update      : true,
            title       : 'IslamiCity '
        }
    });

    //document.write ('<style>html.mm-right.mm-opening .mm-page, html.mm-right.mm-opening #mm-blocker, html.mm-right.mm-opening .mm-fixed-top, html.mm-right.mm-opening .mm-fixed-bottom {right: 320px;}</style>'); //tried that but did not help! 


    //  Click a menu-item
    var $confirm = jQuery('#confirmation');
    $menu.find( 'li a' ).not( '.mm-subopen' ).not( '.mm-subclose' ).bind(
        'click.example',
        function( e )
        {
            e.preventDefault();
            $confirm.show().text( 'You clicked "' + jQuery.trim( jQuery(this).text() ) + '"' );
            jQuery('#menu-right').trigger( 'close' );
        }
    );
});

Answer 1

如果您将容器设置为不显示页面加载，则可以在运行所有其他脚本并设置菜单后将其删除。

然后你可以用

这样的东西来展示它

$('#menu-right').show();
$('#menu-right').css('display','block');

应该这样做

使用JQuery覆盖样式

1 个答案: