将 div 设置为 display:none;使用 javascript 或 jQuery答案

【问题标题】：Setting a div to display:none; using javascript or jQuery将 div 设置为 display:none;使用 javascript 或 jQuery
【发布时间】：2013-05-24 21:02:07
【问题描述】：

我有一个非常快速的问题，应该很容易回答。

我有一个移动导航菜单，它使用 jQuery “向下钻取”菜单级别。每次加载关卡时，jQuery 都会确定菜单的高度，并进行相应的设置。

我在按钮上使用以下脚本来根据当前页面切换显示和隐藏主菜单：

<script type="text/javascript">
    (function ($) {
        $("a.BNnavTrigger").click(function (event) {
            event.preventDefault();
            $("div.drill-down-wrapper").slideToggle("9000");
        });
    })(jQuery);     
</script>

为了让菜单在某些页面上开始“关闭”，我知道我必须将 display:none; 的 css 值提供给包含的 div。对于一个小问题，这一切都很好。

当我最初隐藏菜单时，jQuery 向下钻取菜单插件检测到它是隐藏的，并将菜单高度设置为 0px。当我在最初隐藏菜单的页面上切换菜单时，窗格中的所有其他内容都正确切换，但菜单本身停留在 0 高度。

在我的脑海中，这个问题的明显答案是隐藏包含菜单的 div，通过 javascript，在菜单被加载并且它的高度设置之后。这听起来对吗？

谁能给我一个小脚本来做这个？我是一个完整的 js 菜鸟。其他人对如何处理这个问题有不同的建议吗？

感谢您的宝贵时间！亚历克斯

更新！

JS 在这里解决这个问题： http://jsfiddle.net/fyyG2/17/*

【问题讨论】：

能否也附上html文件？
这一切都很好，但你不应该告诉我们你是如何加载这个菜单并设置它的高度的，如果我们应该能够帮助你完成那部分吗？跨度>
@Edward - 我添加了用于菜单的 html
如果您在购买商品时遇到问题，联系您的供应商寻求帮助可能会更容易。
只是想知道，既然有这么多教程和免费的，为什么还要购买一个深入的菜单？例如。 effinroot.eiremedia.netdna-cdn.com/repo/plugins/menu-nav/… 另外，如果您希望我们能够更好地帮助您，请制作一个 jsFiddle。

标签： javascript jquery css mobile

【解决方案1】：

在文档准备就绪上执行$("#yourId").hide();。

例如：

$(document).ready(function () {

     $("div.drill-down-wrapper").hide();
     var $drillDown = $("#drilldown");

        // (what ever your code is)
 });

【讨论】：

你能在我的 jsFiddle 中告诉我你的意思吗？谢谢..我在 js/jquery 相当菜鸟
$(document).ready(function () { $("div.drill-down-wrapper").hide(); var $drillDown = $("#drilldown");.. ......（你的代码是什么）});
完美。菜单加载，然后隐藏。切换重新显示。谢谢。

【解决方案2】：

试试这个方法：

$("#yourId").css("display","none");

应该可以了！

希望对你有帮助。

【讨论】：

感谢 kiko-lp 的提示。不幸的是，即使我在页面加载后通过 JS 隐藏菜单，菜单仍然检测到它被隐藏，并给自己一个高度值 0。我不知道有什么方法可以延迟这个脚本，以便设置菜单高度首先。
我为这个问题创建了一个 jsFiddle。看看这个！ jsfiddle.net/fyyG2/17

【解决方案3】：

将 css 值 display:none 添加到您的 css 文件就可以了。 http://jsfiddle.net/dxkX6/4/

但我可以看到您的 html 文件中有错字：

$("a.BNnavTrigger").click(function (event) {
       ^

<a class="BNavTrigger">Toggle Menu</a>
        ^

这可能是您遇到问题的原因吗？

【讨论】：

在将 html 传输到此页面时出现拼写错误，但您的权利，它确实可以正常工作。问题是购买的插件使用的 jquery 要求自己最初是可见的，以便正确计算它的高度。
我为这个问题创建了一个 jsFiddle。看看这个！ jsfiddle.net/fyyG2/17

【解决方案4】：

我不确定我是否完全理解你的问题，但这里有一个想法：

将您希望隐藏的不透明度设置为 0，而不是更改它的大小/隐藏它。这样它将保持其尺寸但不会被用户看到：

$('#id').css('opacity',0);

并重新显示元素：

$('#id').css('opacity',1);

【讨论】：

感谢以色列的想法。我正在尝试使用 slideToggle 切换菜单，以便可以在移动浏览器上隐藏菜单。这意味着我也需要随切换开关改变高度尺寸。我创建了一个 jsFiddle 来展示我在这里谈论的内容：我已经为这个问题创建了一个 jsFiddle。看看这个！ jsfiddle.net/fyyG2/17

【解决方案5】：

试试：

$('#id').style = "display: none;"

【讨论】：