使用JavaScript或jQuery将div设置为display:none;

Question

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

我有一个使用jQuery来"下钻"菜单级别的移动端导航菜单。每次加载一个级别时，jQuery确定菜单的高度，并相应地设置它。

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

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

为了使菜单在某些页面上“闭合”起来，我知道必须将包含div的css值设置为display:none;。这一切都很好地运作着，只有一个小问题。

当我最初隐藏菜单时，jQuery下钻式菜单插件会检测到它被隐藏了，并将菜单高度设置为0像素。当我在一个最初隐藏菜单的页面上切换菜单时，面板中的所有其他内容都正确地进行了切换，但菜单本身却卡在0高度。

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

有人能给我提供一点用于此的脚本吗？我完全是个js小白。还有其他人对如何处理这个问题有不同的建议吗？

感谢您的时间！ Alex

更新！

问题的JS fiddle在这里：http://jsfiddle.net/fyyG2/17/

- Alex Ritter

---

除非真的需要将高度设置为特定值才能正常工作，否则在CSS中使用简单的height: auto !important;可能会“修复”该问题。 - user2246674

如果您在使用购买的某些产品时遇到问题，建议直接联系供应商以获取帮助。 - David Thomas

@user2246674 这个脚本正在使用内联CSS值“height:0px;”来设置#drilldown div，即使在同一个div上设置了“height:auto !important;”，菜单仍然无法显示。我上面发布的切换视图脚本有效地取消隐藏了菜单。通过Firebug，我可以看到它只是简单地设置为0像素的高度。 - Alex Ritter

只是想知道，既然有这么多教程和免费的菜单，为什么要购买一个下钻式菜单呢？例如：http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/menu-nav/drill.down/index.html# 此外，如果您希望我们能够更好地帮助您，请创建一个jsFiddle。 - webketje

@r3bel 很遗憾，visibility:hidden不能正确触发slide:toggle事件。它只是使其不可见。 - Alex Ritter

Answer 1

试试这个方法：

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

它应该有效！

我希望它能帮助到你。

- Kiko Mesquita

---

感谢您的提示kiko-lp。不幸的是，即使在页面加载后通过JS隐藏菜单，菜单仍然会检测到它被隐藏，并给自己设置高度值为0。我不知道有任何延迟此脚本的方法，以便先设置菜单高度。 - Alex Ritter

我已经为这个问题创建了一个 jsFiddle。看看吧！http://jsfiddle.net/fyyG2/17/ - Alex Ritter

Answer 2

在文档就绪时，执行 $("#yourId").hide(); 隐藏元素。

例如：

$(document).ready(function () {

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

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

- Ani

---

你能在我的jsFiddle上展示一下你的意思吗？谢谢。我对js / jquery相当新手。 - Alex Ritter

$(document).ready(function () { $("div.drill-down-wrapper").hide(); var $drillDown = $("#drilldown");........(无论您的代码是什么) }); - Ani

完美。菜单加载后隐藏。切换重新显示。谢谢。 - Alex Ritter

Answer 3

将css值display:none添加到您的css文件中就可以正常工作。 http://jsfiddle.net/dxkX6/4/ 但是我发现您的html文件中有一个错别字：

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

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

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

- Edward

---

打字错误出现在将html传输到此页面上，但你是对的，它确实可以正常工作。问题在于所购买的插件使用的jquery要求其最初可见，以便它正确计算其高度。 - Alex Ritter

我已经为这个问题创建了一个 jsFiddle。看看吧！http://jsfiddle.net/fyyG2/17/ - Alex Ritter

Answer 4

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

将您想要隐藏的元素的透明度设置为0，而不是改变其大小/隐藏它。这样它将保持其尺寸，但用户看不到它。

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

并重新显示元素：

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

- Israel

---

感谢你的建议，Israel。我正在尝试使用slideToggle来切换菜单，以便在移动浏览器上隐藏菜单。这意味着我需要高度尺寸随着切换而改变。我已经创建了一个jsFiddle来展示我的问题：http://jsfiddle.net/fyyG2/17/。请查看！ - Alex Ritter

Answer 5

尝试：

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

- Christopher Settles