设置一个 div 来显示：无；使用 javascript 或 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16743611/
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
Setting a div to display:none; using javascript or jQuery
提问by Alex Ritter
I have a really quick question that should be an easy answer.
我有一个非常简单的问题，应该很容易回答。
I have a mobile navigation menu that uses jQuery to "drill down" menu levels. Each time a level is loaded, the jQuery determines the menu's height, and sets it accordingly.
我有一个移动导航菜单，它使用 jQuery 来“向下钻取”菜单级别。每次加载一个关卡时，jQuery 都会确定菜单的高度，并相应地设置它。
I am using the following script on a button to toggle show and hide the main menu based on the current page:
我在按钮上使用以下脚本来根据当前页面切换显示和隐藏主菜单：
<script type="text/javascript">
(function ($) {
$("a.BNnavTrigger").click(function (event) {
event.preventDefault();
$("div.drill-down-wrapper").slideToggle("9000");
});
})(jQuery);
</script>
In order for the menu to start "closed" on certain pages, I know that I must give the css value of display:none;to the containing div. This is all working fine with one small problem.
为了让菜单在某些页面上开始“关闭”，我知道我必须为display:none;包含的 div提供 css 值。这一切都很好，有一个小问题。
When I initially hide the menu, the jQuery drilldown menu plugin detects that it is hidden, and sets the menu height to 0px. When I toggle the menu on a page that had the menu initially hidden, all the other content in the pane toggles correctly, but the menu itself is stuck at a 0 height.
当我最初隐藏菜单时，jQuery 下钻菜单插件检测到它被隐藏，并将菜单高度设置为 0px。当我在最初隐藏菜单的页面上切换菜单时，窗格中的所有其他内容都正确切换，但菜单本身卡在 0 高度。
In my brain, the obvious answer to this problem would be to hide the containing menu div ,via javascript, after the menu has been loaded and it's height set. Does this sound correct?
在我的大脑中，这个问题的明显答案是在加载菜单并设置高度后，通过 javascript 隐藏包含菜单 div 。这听起来正确吗？
Could anyone provide me with a little script to do this? I am a complete and utter noob with js. Does anyone else have a different recommendation as to how to handle this issue?
谁能给我提供一个小脚本来做到这一点？我是一个完整的 js 菜鸟。其他人对如何处理这个问题有不同的建议吗？
Thanks for your time! Alex
谢谢你的时间！亚历克斯
UPDATE!
更新！
JS fiddle for the issue here:http://jsfiddle.net/fyyG2/17/*
这里的问题的 JS 小提琴：http : //jsfiddle.net/fyyG2/17/*
回答by Ani
On document readydo $("#yourId").hide();.
在文件准备好做$("#yourId").hide();。
For example:
例如：
$(document).ready(function () {
$("div.drill-down-wrapper").hide();
var $drillDown = $("#drilldown");
// (what ever your code is)
});
回答by Kiko Mesquita
Try this way:
试试这个方法：
$("#yourId").css("display","none");
it should work it!
它应该工作！
I hope it helps.
我希望它有帮助。
回答by Edward
Adding css value display:none to your css file works just fine. http://jsfiddle.net/dxkX6/4/
将 css 值 display:none 添加到您的 css 文件中效果很好。 http://jsfiddle.net/dxkX6/4/
but I can see that you have a typo in your html file:
但我可以看到你的 html 文件中有一个错字：
$("a.BNnavTrigger").click(function (event) {
^
<a class="BNavTrigger">Toggle Menu</a>
^
is that possibly the reason why you are experiencing the problem?
这可能是您遇到问题的原因吗？
回答by Israel
I'm not sure that I fully understood your problem, but here's a thought:
我不确定我是否完全理解你的问题，但这里有一个想法：
Set the opacity of what you wish to hide to 0, instead of changing it's size / hiding it. This way it will keep its dimensions but won't be seen to the users:
将要隐藏的内容的不透明度设置为 0，而不是更改其大小/隐藏它。这样它将保持其尺寸但不会被用户看到：
$('#id').css('opacity',0);
And to re-show the element:
并重新显示元素：
$('#id').css('opacity',1);
回答by Christopher Settles
Try:
尝试：
$('#id').style = "display: none;"
