stackoom
  简体   繁体   中英

Materialize dropdown and sidenav doesn't work

 原文  2016-03-11 22:52:35  7   3    javascript/ jquery/ html/ materialize

Question

I'm using Materialize for my design. The dropdown and the sidenav doesn't work. The console doesn't give any errors and I did initialize the scripts after jQuery just like the materializecss.js.

Here's the code: 

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- Initialize Materialize Scripts -->
    <script>$(".button-collapse").sideNav();</script>
    <script>$(document).ready(function(){
        $('.parallax').parallax();
    });</script>
    <script>
        $(".dropdown-button").dropdown({
            hover: false
        });
    </script>
</head>
<body>
    <ul id="dropdown1" class="dropdown-content">
      <li><a class="fakelink">Lite</a></li>
      <li><a class="fakelink">Standard</a></li>
      <li><a class="fakelink">Essential</a></li>
      <li class="divider"></li>
      <li><a class="fakelink">Enterprise</a></li>
  </ul>
    <nav role="navigation" class="red">
        <div class="nav-wrapper container">
            <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a>
            <ul class="right hide-on-med-and-down">
                <li><a class="fakelink">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink">Other Services</a></li>
                <li><a class="fakelink">About</a></li>
            </ul>
            <ul id="nav-mobile" class="side-nav" style="left:-250px;">
                <li><a class="fakelink truncate">Home</a></li>
                <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li>
                <li><a class="fakelink truncate">Other Services</a></li>
                <li><a class="fakelink truncate">About</a></li>
            </ul>
            <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a>
        </div>
    </nav>

3 answers

solution1
 3  2016-03-11 23:00:06

You need to make sure the document has loaded before setting the side nav and dropdown. Just move that code inside your document.ready function 

 <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script> <!-- CSS --> <link rel="stylesheet" href="assets/css/style.css"> <!-- Initialize Materialize Scripts --> <script>$(document).ready(function(){ $(".button-collapse").sideNav(); $('.parallax').parallax(); $(".dropdown-button").dropdown({ hover: false }); });</script> <body> <ul id="dropdown1" class="dropdown-content"> <li><a class="fakelink">Lite</a></li> <li><a class="fakelink">Standard</a></li> <li><a class="fakelink">Essential</a></li> <li class="divider"></li> <li><a class="fakelink">Enterprise</a></li> </ul> <nav role="navigation" class="red"> <div class="nav-wrapper container"> <a id="logo-container" class="brand-logo fakelink">MKHosting <span style="font-size:12pt;font-weight:bold;">- Easy. Fast. Secure.</span></a> <ul class="right hide-on-med-and-down"> <li><a class="fakelink">Home</a></li> <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li> <li><a class="fakelink">Other Services</a></li> <li><a class="fakelink">About</a></li> </ul> <ul id="nav-mobile" class="side-nav" style="left:-250px;"> <li><a class="fakelink truncate">Home</a></li> <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Hostingplans<i class="material-icons right">arrow_drop_down</i></a></li> <li><a class="fakelink truncate">Other Services</a></li> <li><a class="fakelink truncate">About</a></li> </ul> <a class="button-collapse fakelink" data-activates="nav-mobile"><i class="material-icons navColorFix">menu</i></a> </div> </nav>

solution2
 0 ACCPTED  2017-06-13 01:47:23

Have you tried putting script at the END OF BODY ELEMENT ? It works for me. 

 <script>$(document).ready(function(){ $(".button-collapse").sideNav(); $('.parallax').parallax(); $(".dropdown-button").dropdown({ hover: false }); }); </script>

solution3
 -1  2016-06-11 00:55:35

This code worked for me!! You can find the entire explanation in here: http://materializecss.com/side-nav.html 

<ul id="slide-out" class="side-nav">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li class="no-padding">
    <ul class="collapsible collapsible-accordion">
      <li>
        <a class="collapsible-header">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
        <div class="collapsible-body">
          <ul>
            <li><a href="#!">First</a></li>
            <li><a href="#!">Second</a></li>
            <li><a href="#!">Third</a></li>
            <li><a href="#!">Fourth</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </li>
</ul>
<ul class="right hide-on-med-and-down">
  <li><a href="#!">First Sidebar Link</a></li>
  <li><a href="#!">Second Sidebar Link</a></li>
  <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">First</a></li>
    <li><a href="#!">Second</a></li>
    <li><a href="#!">Third</a></li>
    <li><a href="#!">Fourth</a></li>
  </ul>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Materialize dropdown doesn't work Materialize: dropdown in “if” statement doesn't work Materialize select list dropdown scrollbar doesn't work properly on IE Materialize sidenav collapsible won't work within a separate JS file Materialize sidenav won't appear Materialize css carousel doesn't work in Angular Meteor + Materialize: collapsable in for each doesn't work Materialize Css Timepicker onSelect doesn't work Materialize js doesn't work on first load Materialize Modal doesn't work on starter template
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM