在document.ready jquery之后更改css显示元素

Question

我正在测试新的菜单代码及其中的一个问题，就是它会加载所有内容，然后在完成加载后跳转到位。

所以我正在尝试隐藏它直到文档准备就绪然后显示它

所以，CSS隐藏它：

#mega-menu-1 {
font: normal 13px Arial, sans-serif; 
list-style: none; 
position: relative; 
padding: 0; 
margin: 0;
margin-top:13px;
display: none;
}

然后我在页面末尾调用jquery来加载菜单，然后将显示更改为阻止，但菜单不显示

这是我正在尝试的jquery：

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $('#mega-menu-1').css('display') == 'block';
    });
</script>

这样做的正确方法是什么？

Answer 1

如果您尝试设置display属性，那么jQuery函数css()的语法错误，则需要css( propertyName , value)来设置属性值。

更改

$('#mega-menu-1').css('display') == 'block';

到的

$('#mega-menu-1').css('display', 'block') ;

OR 您也可以调用jQuery show()方法来执行相同操作。

$('#mega-menu-1').show();

Answer 2

您应该使用：

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $('#mega-menu-1').show();
    });
</script>

reference website

Answer 3

我认为问题在于＆＃34; dcMegaMenu＆＃34;刚从extern源（JS文件）加载的插件。试试这个，它帮助我一次在另一个项目中：

<script type="text/javascript">
    $(document).ready(function($){
        $('#mega-menu-1').dcMegaMenu({
            rowItems: '2',
            event: 'click',
            fullWidth: false
        });
        $(document).find('#mega-menu-1').css({'display' : 'block'});
    });
</script>

Answer 4

我为您制作了一个显示菜单的jsFiddle test page。

显示值更改中的次要更新，但我也注释掉了.dcMegaMenu语句（因为您没有提供任何有关它的信息）。如果你仍然有问题可能是因为它失败了。

$('#mega-menu-1').css('display', 'block');

希望这有帮助。

Answer 5

它是jQuery语法，而不是JavaScript

替换：

$('#mega-menu-1').css('display') == 'block';

使用：

$('#mega-menu-1').css('display', 'block');

如果你想使用getter和setter：

设置： $('#mega-menu-1').css('display', 'block');

获取： $('#mega-menu-1').css('display');

比较： $('#mega-menu-1').css('display') == "block"