Jquery 物化下拉列表在卡内不工作

我试图让MaterializeCSS下拉菜单在一张卡中工作，但当我点击按钮时，什么都没有发生

我已经准备了一个JSFIDLE，其中包含了文档中的示例以及在stackoverflow和google上可以找到的所有答案，但是我仍然无法让它工作。我做错了什么

html

css

---

materialize 0.97.2和0.97.3中有一个下拉和选择错误；有关更多信息，请参阅和

---

我在Meteor中使用了MaterialECSS的Sass版本，并通过使用诗意的：materialize解决了这个问题-scss@1.97.1在我的meteor软件包文件中强制使用旧版本。下拉列表现在可以工作了，老jquery和所有

如果您切换到jQuery2.x，它就可以工作，所以MaterializeThx肯定存在兼容性问题，我已经让它在codepen上工作了。我注意到的唯一真正的区别是jquery的版本…我仍然无法让它在JSFIDLE上工作…我想在我的meteor应用程序中使用它，但是meteor使用jquery 1.11，我找不到如何升级它。。。有没有人设法将材料下拉列表用于meteor？

<div class="row">
  <div class="col s12">
    <div class="card blue-grey darken-1">
      <div class="card-content white-text">
        <span class="card-title">Card Title</span>
        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
      </div>
      <div class="card-action">
        <a href="#">This is a link</a>

        <!-- Dropdown Trigger -->
        <a class='dropdown-button' 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>
      </div>
    </div>    
  </div>
</div>

$(document).ready(function() {
  console.log("intiate dropdown");
  $('.dropdown-button').dropdown({
    inDuration: 300,
    outDuration: 225,
    constrain_width: false,
    hover: true,
    gutter: 0,
    belowOrigin: false,
    alignment: 'left'
  });
});

.card {
  overflow: visible !important;
};