Question

我正在将脚趾浸入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>

Answer 1

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

定位<ul>：

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

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

JSFiddle

占用空间的Javascript隐藏元素

1 个答案: