Dropdown button not active materialize

Question

Сегодня я закончил свою первую страницу своего портфолио. Я вижу выпадающее меню (в navbar для ПК) неактивным. См. Portfolio. Я проверяю style.css init.js, и я не понимаю, почему мой выпадающий режим отключен :(

Я попытался скопировать html-код материализованной документации, но не повлиял. Я не знаю, почему блок id! ! есть ли у вас я идею

мой HTML-код:

<div class="navbar-fixed "> 
    <!-- marre menu --> 
    <nav class=" blue"> 
     <div class="nav-wrapper container"> 

      <ul id="dropdown" class="dropdown-content"> 
       <li><a href="">Livrets de compétences</a></li> 
       <li class="divider"></li> 
       <li><a href="">Tutoriels</a></li> 
      </ul> 

      <a href="http://cappsim.fr" class=" brand-logo">Simon.C</a> 
      <ul class="right hide-on-med-and-down white-text"> 
       <li class="waves-effect"><a href="#parcours">Mon parcours</a></li> 

       <li><a class="dropdown-button " href="#!" data-hover="true" data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li> 

      <li class="waves-effect"><a href="">Veille Juridique</a></li> 
      <li class="waves-effect"><a href="">Stages</a></li> 
      <li class="waves-effect"><a href="">Curriculum Vitae</a></li> 
      </ul> 

      <ul id="nav-mobile" class="side-nav"> 
       <li><a href="http://cappsim.fr">Accueil</a></li> 
       <div class="divider"></div> 

       <li><a class="dropdown-button " data-hover="true" data-activates="dropdown" data-beloworigin="true">Compétences<i class="material-icons right ">arrow_drop_down</i></a></li> 

       <li><a href="http://cappsim.fr">Veille juridique</a></li> 
       <li><a href="http://cappsim.fr">Stages</a></li> 
       <li><a href="http://cappsim.fr">Curriculum Vitae</a></li> 
      </ul> 
      <a data-activates="nav-mobile" class="button-collapse "><i class="material-icons white-text"></i></a> 

     </div> 

    </nav> 
</div> 

Мой код JS:

(function ($) { 
$(function() { 

    $('.button-collapse').sideNav(); 
    $('.parallax').parallax(); 

    $('.dropdown-button').dropdown(); 

    $(document).ready(function() { 
     $(".dropdown-button").dropdown(); 
    }); 




    function isElementInViewport(el) { 
     var rect = el.getBoundingClientRect(); 
     return (
      rect.top >= 0 && 
      rect.left >= 0 && 
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
      rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
     ); 
    } 

    var items = document.querySelectorAll(".timeline li"); 

    // code for the isElementInViewport function 


    function callbackFunc() { 
     for (var i = 0; i < items.length; i++) { 
      if (isElementInViewport(items[i])) { 
       items[i].classList.add("in-view"); 
      } 
     } 
    } 

    window.addEventListener("load", callbackFunc); 
    window.addEventListener("scroll", callbackFunc); 

}); // end of document ready 


})(jQuery); // end of jQuery name space 

Answer 1

Я сделал это sample В вашем случае, я думаю, что это недостающее Ли. когда кнопка будет отображаться при нажатии. Here, вы можете увидеть более подробную информацию о ниспадающем JS в материализовать

$('.dropdown-button').dropdown({ 
 
    inDuration: 300, 
 
    outDuration: 225, 
 
    constrain_width: false, // Does not change width of dropdown to that of the activator 
 
    hover: true, // Activate on hover 
 
    gutter: 0, // Spacing from edge 
 
    belowOrigin: false, // Displays dropdown below the button 
 
    alignment: 'left' // Displays dropdown with edge aligned to the left of button 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
 

 
<!-- Dropdown Trigger --> 
 
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a> 
 

 
<!-- Dropdown Structure --> 
 
<ul id='dropdown1' class='dropdown-content'> 
 
    <li><a href="#!">one</a></li> 
 
    <li><a href="#!">two</a></li> 
 
    <li class="divider"></li> 
 
    <li><a href="#!">three</a></li> 
 
</ul>

я помог в некотором роде.

Answer 2

Я обновил свой код и поместить ваш образец HTML:

http://pastebin.com/DA5piF0W

JS:

(function ($) { 
$(function() { 

    $('.button-collapse').sideNav(); 
    $('.parallax').parallax(); 

    $(document).ready(function() { 
     $(".dropdown-button").dropdown(); 
    }); 

    $('.dropdown-button').dropdown({ 
     inDuration: 300, 
     outDuration: 225, 
     constrain_width: false, // Does not change width of dropdown to that of the activator 
     hover: true, // Activate on hover 
     gutter: 0, // Spacing from edge 
     belowOrigin: true, // Displays dropdown below the button 
    }); 

CSS не перерыву материализуются?

http://pastebin.com/Q2dQFjK0

тогда, моя выпадающая-содержания работы

, когда линия <a class='dropdown-button btn' href='#' data-hover="true" data-activates='dropdown1'>Drop Me!</a>

не в

<div class="navbar-fixed "> 
     <nav class=" blue"> 
      <div class="nav-wrapper container"> 

близнецов кнопки работают, но если я скопировать тх образец на моем нав бар я не имел никакого эффекта ...

Я замечаю меню «сэндвич» как disapar, когда я иду на ссылку для мобильных проблем?