Materilize侧导航始终打开，将不会加载倒塌

Question

我这边-NAV应该是装载倒塌，也呈现出模式在这个小提琴：

相关代码： HTML：

<header class="text-center"> 
 
</header> 
 
<div class="main_container"> 
 

 
<nav class="indigo darken-4"> 
 
    <div class="nav-wrapper"> 
 
    <a href="#" class="brand-logo center"><h1>code.partners near you</h1></a> 
 
    <ul id="slide-out" class="side-nav fixed"> 
 
     <li class="bold"><a href="/auth/github" class="waves-effect waves-teal">Login with Github</a></li> 
 
     <li class="bold"><a href="/marker" class="waves-effect waves-teal">Create a New Marker</a></li> 
 
     <li class="bold"><a href="/logout" class="waves-effect waves-teal">Logout</a></li> 
 
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<main> 
 
{{!-- <div class="container text-center"> --}} 
 
    <div id="map_container"> 
 
    \t <div id="map"></div> 
 
     <div id="message_box"> 
 
     <ul id="messages"></ul> 
 
     <div id="messageInputBox"> 
 
      <form action=""> 
 
      <input id="m" autocomplete="off" /><button>Send</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
{{!-- </div> --}} 
 

 
</main>

和我的javascript：

$(document).ready(function(){ 
 
    console.log("interactive is linked and ready"); 
 

 
// Initialize collapse button 
 

 

 
    $(".button-collapse").sideNav({ 
 
     menuWidth: 240, // Default is 240 
 
     edge: 'left', // Choose the horizontal origin 
 
     closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
 
    }); 
 
    // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
 
    //$('.collapsible').collapsible(); 
 

 

 
});//end document.ready

我的Heroku页： http://coding-partners.herokuapp.com/home

我拨弄：https://jsfiddle.net/clwarnock/h7md1q3u/8/

我试图让我的身边，导航行动更如小提琴：

1. 开始折叠
2. 打开时显示模式

编辑丹尼Buonocore

当视口被调整到一个小器件尺寸，没有汉堡包菜单再次向上打开。我认为在某个地方我没有看到冲突。

Answer 1

侧栏设计为当窗口足够大时自动展开。这被称为responsive web design。如果你缩小浏览器，你会发现它不会在加载时扩展。