个人中心
gpt4 book ai didi

javascript - 无法使用 Materialize CSS 框架生成下拉菜单

转载 作者：太空宇宙 更新时间：2023-11-03 20:34:46 25 4
gpt4 key购买 nike

文档:http://materializecss.link/dropdown.html 

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

<!-- Dropdown Structure -->
<ul style="width: 138px; display: none; top: 283.317px; left: 454px; height: 159px; opacity: 0;" 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>

显然，这就是您需要的全部内容。我到底错过了什么？

更新:

这都在我的页面底部:

  <script src="js/jquery.min.js"></script>
  <script src="js/materialize.min.js"></script>

  <!-- Materialize -->
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>

  <!-- Javascript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/handlebars-v1.3.0.js"></script>
  <script src="js/bootstrap3-wysihtml5.js"></script>
  <script src="js/blog.js"></script>

  <!-- Popup -->

  <script src="view.min.js?auto"></script>

...这是在我顶部的标题中:

<script>
    $( document ).ready(function() {
      $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: false, // Activate on click
      alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
      gutter: 0, // Spacing from edge
      belowOrigin: false // Displays dropdown below the button
    }
    );
    });
  </script>

最佳答案

也许这可以帮助你？包括 jQuery、materialize.js、materialize.css 并在文档准备好时执行 jQuery 插件初始化:

参见 https://learn.jquery.com/using-jquery-core/document-ready/

我认为 JavaScript 文件的顺序也很重要。首先加载 jQuery，然后加载 materialize.js

$( document ).ready(function() {
    $('.dropdown-button').dropdown({
      inDuration: 300,
      outDuration: 225,
      constrain_width: false, // Does not change width of dropdown to that of the activator
      hover: false, // Activate on click
      alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
      gutter: 0, // Spacing from edge
      belowOrigin: false // Displays dropdown below the button
    }
  );
});
<html> 
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>
  </head>
  <!-- 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>
</html>

关于javascript - 无法使用 Materialize CSS 框架生成下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35126848/

25 4 0
文章推荐： python - 将函数列表应用于可迭代列表
文章推荐： matlab - 如何防止文本在图形上出现裁剪？
文章推荐： matlab - 如何更改y轴的限制？ `ylim` 不工作
文章推荐： html - 为什么这段内容会出现在header标签内容下面？