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

时间:2012-12-28 08:56:48

标签: jquery css

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

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

所以,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>

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

5 个答案:

答案 0 :(得分:5)

如果您尝试设置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();

答案 1 :(得分:1)

您应该使用:

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

reference website

答案 2 :(得分:1)

我认为问题在于&#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>

答案 3 :(得分:0)

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

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

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

希望这有帮助。

答案 4 :(得分:-1)

它是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"