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隱藏元素佔用空間

回答

相關問題