[英]Setting a div to display:none; using javascript or jQuery
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.我有一个移动导航菜单,它使用 jQuery 来“向下钻取”菜单级别。 Each time a level is loaded, the jQuery determines the menu's height, and sets it accordingly.每次加载一个关卡时,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;
为了让菜单在某些页面上开始“关闭”,我知道我必须给出display:none;
的 css 值display:none;
to the containing div.到包含 div。 This is all working fine with one small problem.这一切都很好,有一个小问题。
When I initially hide the menu, the jQuery drilldown menu plugin detects that it is hidden, and sets the menu height to 0px.当我最初隐藏菜单时,jQuery 下钻菜单插件检测到它被隐藏,并将菜单高度设置为 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.当我在最初隐藏菜单的页面上切换菜单时,窗格中的所有其他内容都正确切换,但菜单本身卡在 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.在我的大脑中,这个问题的明显答案是在加载菜单并设置高度后,通过 javascript 隐藏包含菜单 div 。 Does this sound correct?这听起来正确吗?
Could anyone provide me with a little script to do this?谁能给我提供一个小脚本来做到这一点? I am a complete and utter noob with js.我是一个完整的 js 菜鸟。 Does anyone else have a different recommendation as to how to handle this issue?其他人对如何处理这个问题有不同的建议吗?
Thanks for your time!谢谢你的时间! Alex亚历克斯
UPDATE!更新!
JS fiddle for the issue here: http://jsfiddle.net/fyyG2/17/ *这里的问题的 JS 小提琴: http : //jsfiddle.net/fyyG2/17/ *
On document ready do $("#yourId").hide();
在文件准备好$("#yourId").hide();
. .
For example:例如:
$(document).ready(function () {
$("div.drill-down-wrapper").hide();
var $drillDown = $("#drilldown");
// (what ever your code is)
});
Try this way:试试这个方法:
$("#yourId").css("display","none");
it should work it!它应该工作!
I hope it helps.我希望它有帮助。
Adding css value display:none to your css file works just fine.将 css 值 display:none 添加到您的 css 文件中效果很好。 http://jsfiddle.net/dxkX6/4/ 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?这可能是您遇到问题的原因吗?
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.将要隐藏的内容的不透明度设置为 0,而不是更改其大小/隐藏它。 This way it will keep its dimensions but won't be seen to the users:这样它将保持其尺寸但不会被用户看到:
$('#id').css('opacity',0);
And to re-show the element:并重新显示元素:
$('#id').css('opacity',1);
尝试:
$('#id').style = "display: none;"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.