2015-09-07 8 views
10

मेरे पास भौतिक बनाने का एक बुनियादी सेटअप है और स्लाइड आउट साइड-एनवी को छोड़कर सबकुछ ठीक लगता है।सीएसएस साइड-एनवी को काम नहीं कर रहा

मेरा कोड यहां है। मेनू:

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

जे एस:

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

जब स्क्रीन आकार को कम करने, हालांकि, एक मेनू बाहर का विस्तार नहीं करता हैमबर्गर पर क्लिक मैं उपयुक्त हैमबर्गर मेनू मिलता है। एक हैश # के साथ यूआरएल अपडेट और यह है। मेरे जेएस आउटपुट में कोई त्रुटि रिपोर्ट नहीं है।

अन्य जेएस कार्यों के साथ, ड्रॉपडाउन मेनू काम करता है और मोडल काम करता है। क्यों श्री साइडनव सहयोग नहीं कर रहे हैं।

कोई विचार?

उत्तर

20

मुझे एक समाधान मिला। मैंने मटेरियलाइज़ से इनिट हैक को पकड़ लिया: http://materializecss.com/templates/starter-template/js/init.js और फिर सुनिश्चित किया कि इसे आखिरकार मेरे जेएस में बुलाया गया था। (बाकी जेएस के सामने इसे डालने से यह असफल हो जाता है।)

+0

यह सब आपकी स्क्रिप्ट फ़ाइलों के क्रम पर निर्भर करता है! आपको jQuery के बाद अपना कोड चलाने और सामग्री को libs लोड किया गया है ... मैं अनुकूलन के लिए कॉलबैक के साथ कस्टम async लोड का उपयोग करें – qdev

संबंधित मुद्दे