實現CSS側導航不工作

我有一個基本的設置Materialise運行，似乎一切都好，除了滑出side-nav。實現CSS側導航不工作

這是我的代碼。菜單：

<ul class="right hide-on-med-and-down"> 
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li> 
    <li><a class="modal-trigger" href="#signup">Signup</a></li> 
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li> 
</ul> 

<ul id="slide-out" class="side-nav"> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Signup</a></li> 
    <li><a href="#">Sign In</a></li> 
</ul> 

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

JS：

<script> 
$(".dropdown-button").dropdown(); 
$(".button-collapse").sideNav(); 
$(document).ready(function(){ 
    $('.modal-trigger').leanModal(); 
}); 
</script>

我得到相應的漢堡包菜單時降低屏幕尺寸，但是，單擊漢堡包不會擴展出一個菜單。 URL用哈希＃進行更新，就是這樣。在我的JS輸出中沒有報告錯誤。

與其他的JS功能，下拉菜單的作品和模式的作品。難以理解爲什麼sideNav先生不合作。

任何想法？

來源

2015-09-07 Sheldon Scott

我找到了解決方案。我從Materialise中抓取了init hack：http://materializecss.com/templates/starter-template/js/init.js，然後確定它是最後一次在我的JS中調用的。（把它放在JS的其餘部分導致它失敗。）

來源

2015-09-08 12:12:56

這一切都取決於您的腳本文件的順序！你必須在jQuery＆Materialize庫已經加載後運行你的代碼...我使用自定義異步加載與優化回調 – qdev

實現CSS側導航不工作

回答

相關問題