jQuery的擴展菜單推身體向下

Question

我試圖創建移動視圖可展開的菜單，按下向下翻頁使用JQuery的身體所以菜單坐落在機身頂部沒有重疊。我很確定我正在使用正確的命令，但似乎無法確定要定位哪些元素。

<script> 
    $(document).ready(function(){ 
    $("button.navbar-toggle").click(function() { 
    $("#myNavbar").toggleClass("open"); 
}); 
    }); 
</script> 

CSS：

div.open{ 
    margin-bottom:120px; 
} 

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#home">#</a> 
    </div> 
    <div class="collapse navbar-collapse open" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Option1</a></li> 
     <li><a href="#">Option2</a></li> 
     <li><a href="#">Option3</a></li> 
     <li><a href="#">Option4</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

任何意見將非常感激！

Answer 1

我覺得是你想找的這個

$(document).ready(function(){ 
    $("button.navbar-toggle").click(function() { 
    $("#myNavbar").slideToggle(); 
    $('.homepage-wrapper').toggleClass("open"); 
    }); 
}); 

確保你已經包括所需的jQuery和引導文件

CSS

.homepage-wrapper { 
    margin-top: 60px; 
} 
.homepage-wrapper.open{ 
    margin-top:260px; 
}