Javascript隐藏元素占用空间

我正在将脚趾浸入JavaScript的世界并为我的手机网站创建菜单。Javascript隐藏元素占用空间

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

任何人都可以让我知道我做错了什么，我如何让页面内容忽略隐藏的菜单？

的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>

来源

2015-05-13 Tessa

你能后的HTML吗？ – j08691

@Tessa我真的很强烈建议你不要从jQuery动画开始。看看你如何使用CSS来创建解决方案。你的JavaScript很简单，你可能会发现它更像你的期望。我建议这样做，因为使用jQuery来处理动画等事情是人们几年前做的事情，而这正是大多数人试图避免的事情！如果你抛弃了jQuery动画，你现在可以学到一些与之相关的东西。 – Seer

你去了:-) – Tessa

您在列表项中的定位锚，列表项和它们的容器没有得到所有隐藏的。

目标的<ul>：

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

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

JSFiddle

来源

2015-05-13 20:50:24 George

Javascript隐藏元素占用空间

回答

相关问题