Javascript隐藏元素占用空间答案

【问题标题】：Javascript hidden element taking up spaceJavascript隐藏元素占用空间
【发布时间】：2015-07-25 07:52:25
【问题描述】：

我正在涉足 JavaScript 世界并为我的移动网站创建一个菜单。

这个想法是在顶部会有一个菜单栏，如果你点击它，它会滑动打开推送页面内容。如果您再次单击菜单栏，菜单将滑动关闭，内容将跟随它回到原始位置。除了一个例外，这一切都很好。当我关闭菜单时，内容会跟随它，然后向下ping，为隐藏菜单留下空间。（希望这是有道理的）

谁能告诉我我做错了什么以及如何让页面内容忽略隐藏菜单？

JavaScript

$(document).ready(function(){
    $('.dropdown').hide();

    $('#menu_head').click(function(){
        $('.dropdown').slideToggle();
    });
});

CSS

#nav_mobile {
    position: relative;
    font-family: Pacifico, Calibri, Arial, sans-serif;
    font-size: 16px;
    padding-top: 2%;
    margin: 0px auto;
    width: 100%
    }   
#nav_mobile #nav_menu {
    width: 100%;
    text-align: center;
    position: absolute;
}
#nav_mobile #menu_head {
    background: #070707;
    width: 100%;
    color: #454955;
    font-size: 16px;
    text-align: center;
}
#nav_mobile .dropdown {
    background: #070707;
    width: 100%;
}
#nav_mobile a {
    display: block;
}

我看过很多文章说将显示更改为隐藏，但如果我这样做了，它并不能解决问题。事实上，这让情况变得更糟，因为菜单不会作为一个整体滑动，而是每个菜单项独立于其他菜单项滑动。

HTML

<nav id="nav_mobile" role="navigation">
    <h2 id="menu_head">Menu</h2>
    <ul id="nav_menue">
        <li><a href="<?php echo site_url('home/index') ?>" class="dropdown">Home</a></li>
        <li><a href="<?php echo site_url('home/news') ?>" class="dropdown">News</a></li>
        <li><a href="<?php echo site_url('home/gallery') ?>" class="dropdown">Gallery</a></li>
        <li><a href="<?php echo site_url('home/band') ?>" class="dropdown">Band</a></li>
        <li><a href="<?php echo site_url('home/music') ?>" class="dropdown">Music</a></li>
        <li><a href="<?php echo site_url('home/video') ?>" class="dropdown">Video</a></li>
        <li><a href="<?php echo site_url('home/shows') ?>" class="dropdown">Shows</a></li>
        <li><a href="<?php echo site_url('home/contact') ?>" class="dropdown">Contact</a></li>
        <li><a href="<?php echo site_url('home/mailing_list') ?>" class="dropdown">Join the Mailing List</a></li>
    </ul>
</nav>

【问题讨论】：

@Tessa 我真的非常强烈建议您不要从使用 jQuery 的动画开始。看看你如何使用 CSS 来创建解决方案。您的 JavaScript 将非常简单，并且您可能会发现它的工作方式更像您的预期。我推荐这个是因为使用 jQuery 来处理动画之类的事情是人们多年前所做的事情，而且这是最努力避免的事情！如果你放弃 jQuery 动画，你现在可以学习一些相关的东西。
实际上，继续我的上一条评论，如果你使用 CSS，你甚至根本不需要 JavaScript！看看这里：valdelama.com/css-responsive-navigation 主要优点是，如果你使用 CSS 来做这件事，你可以利用硬件加速——这让事情变得更加流畅，尤其是在旧设备上。
澄清一下，如果您觉得 JavaScript 会更容易，或者您只是想体验一下，请务必使用 JavaScript。我只是敦促你不要使用 jQuery。它很慢，使代码更难组织，很大，而且这些天通常是不必要的。请记住，jQuery !== JavaScript
嗯，jQuery 是 javascript，但 javascript 不是 jQuery ;-) 更糟糕的是，我会说使用 jQuery 制作动画非常好。最佳案例场景 - 两者都学习，并使用您最终喜欢的东西。
感谢赛尔和麦肯。我非常感谢您的意见。我是网络开发新手，目前正在按照书籍告诉我的方式去做，直到我有足够的经验来更好地了解，所以听取其他人关于如何做事的意见非常有帮助:-)

标签： javascript jquery css menu show-hide

【解决方案1】：

您的目标是列表项中的锚点，您的列表项及其容器根本不会隐藏。

瞄准<ul>：

$(document).ready(function () {
    var $navMenue = $('#nav_menue');
    $navMenue.hide();

    $('#menu_head').click(function () {
        $navMenue.slideToggle();
    });
});

JSFiddle

【讨论】：