在 document.ready jquery 之后更改 css 显示元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14066988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing css display element after document.ready jquery
提问by Darren Sweeney
I am testing new menu code and one problem with it, is that it loads everything, then jumps into place when all finished loading.
我正在测试新的菜单代码，它的一个问题是它加载了所有内容，然后在所有加载完成后跳转到位。
So what i'm trying is to hide it until the document is ready and then show it
所以我想要的是隐藏它直到文档准备好然后显示它
So, CSS to hide it:
所以，CSS 来隐藏它：
#mega-menu-1 {
font: normal 13px Arial, sans-serif;
list-style: none;
position: relative;
padding: 0;
margin: 0;
margin-top:13px;
display: none;
}
Then I'm calling the jquery at the end of the page to load the menu, then change the display to block, but menu not displaying
然后我在页面末尾调用 jquery 来加载菜单，然后将显示更改为阻止，但菜单不显示
Here's the jquery I'm trying:
这是我正在尝试的 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>
What's the correct way to do this?
这样做的正确方法是什么？
回答by Adil
If you are trying to set the displayproperty then you have wrong syntax for jQuery function css(), you need css( propertyName , value)to set property value.
如果您尝试设置display属性，那么您对 jQuery 函数的语法有误css()，您需要css( propertyName , value)设置属性值。
Change
改变
$('#mega-menu-1').css('display') == 'block';
To
到
$('#mega-menu-1').css('display', 'block') ;
ORYou can also call jQuery show()method that will do the same.
或者你也可以调用 jQueryshow()方法来做同样的事情。
$('#mega-menu-1').show();
回答by Surinder ツ
You should use :
你应该使用：
<script type="text/javascript">
$(document).ready(function($){
$('#mega-menu-1').dcMegaMenu({
rowItems: '2',
event: 'click',
fullWidth: false
});
$('#mega-menu-1').show();
});
</script>
回答by Darren Sweeney
I think the problem is the "dcMegaMenu" plugin just loaded from extern source (a JS-file). Try this, it helped me once in another project:
我认为问题在于刚刚从外部源（JS 文件）加载的“dcMegaMenu”插件。试试这个，它在另一个项目中帮助了我一次：
<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>
回答by Seb T.
I made you a jsFiddle test pagewhere your menu get displayed.
我为您制作了一个jsFiddle 测试页面，您的菜单将在其中显示。
A minor update in the display value change, but also I have commented out your .dcMegaMenu statement (cause you don't give any information about it). And if you still have the issue is probably because it fails on this one.
显示值更改中的一个小更新，但我也注释掉了您的 .dcMegaMenu 语句（因为您没有提供任何有关它的信息）。如果你仍然有问题，可能是因为它在这个问题上失败了。
$('#mega-menu-1').css('display', 'block');
Hope this helps.
希望这可以帮助。
回答by Praveen Kumar Purushothaman
It is jQuery Syntax, not JavaScript
它是 jQuery 语法，而不是 JavaScript
Replace:
代替：
$('#mega-menu-1').css('display') == 'block';
With:
和：
$('#mega-menu-1').css('display', 'block');
And if you want to use getters and setters:
如果你想使用 getter 和 setter：
Set:$('#mega-menu-1').css('display', 'block');
放：$('#mega-menu-1').css('display', 'block');
Get:$('#mega-menu-1').css('display');
得到：$('#mega-menu-1').css('display');
Compare:$('#mega-menu-1').css('display') == "block"
相比：$('#mega-menu-1').css('display') == "block"
