ドロップダウンボタンがアクティブ化されていません

Question

今日私のポートフォリオの1ページ目が終了しました。（PC用のナビゲーションバーの）ドロップダウンメニューが表示されません。 Portfolioを参照してください。私はstyle.css init.jsをチェックして、私のドロップダウンがモードをとどめていない理由を見つけません:(

私はマテリアライズド・ドキュメントのHTMLコードをコピーしようとしましたが、何の効果もありません。 ！あなた私のアイデアを持って

私の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、私は何らかの形で支援してきました

$('.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>

マテリアライズのドロップダウンJSの詳細を見ることができます。

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

双子ではありませんが、ときに私は自分のナビゲーションにthaのサンプルをコピーする場合バー私は効果がなかった...

私はモバイルの問題のリンクに行くとき私はdisaparとしてメニュー "サンドイッチ"を発言する？