实现：下拉按钮不会下拉

Question

在下面的简单文档中，点击时下拉菜单都没有真正下拉。第一个是从 Materialise 网站复制粘贴的。我正在 Linux 上使用 Firefox 查看此内容。我移动了一些文件，这就是文件路径略有不同的原因，但开发人员控制台没有显示任何错误（除了未声明字符编码的事情）。到目前为止，我从 Materialise 站点实现的所有内容都已正确呈现，并且我已检查 JavaScript 代码是否为运行。

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="../css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>


  <ul id="dropdown2" class="dropdown-content">
    <li><a href="#!">one<span class="badge">1</span></a></li>
    <li><a href="#!">two<span class="new badge">1</span></a></li>
    <li><a href="#!">three</a></li>
  </ul>
  <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>




      <div class="row">

        <div class="col s3">
          <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu <i class="material-icons right">arrow_drop_down</i></a>
          <ul id="dropdown2" class="dropdown-content">
            <li>Home</li>
            <li>Map</li>
            <li>1. Prehuman</li>
            <li>2. Ancient</li>
            <li>3. Classical</li>
          </ul>

        </div>
        <div class="col s9">
          <div class="section hoverable z-depth-2">
            <h5 class="center-align">Section header</h5>
            <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



            <img src="../images/pic.png" alt="" class="responsive-img">

            <div class="video-container">
              <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="../js/materialize.min.js"></script>
    </body>
  </html>

我尝试了一些变体，我将 data-target 替换为 data-activates 并将 dropdown-trigger 替换为 dropdown-button，但行为是相同的。按钮本身会显示出来，当鼠标悬停在它上面时，它会变成一个点击符号。但是当你点击时，什么也没有发生。

Answer 1

我想你只是忘了初始化实现 M.AutoInit(); https://materializecss.com/auto-init.html

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


</head>

<body>

    <ul id="dropdown2" class="dropdown-content">
        <li>
            <a href="#!">one
                <span class="badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">two
                <span class="new badge">1</span>
            </a>
        </li>
        <li>
            <a href="#!">three</a>
        </li>
    </ul>
    <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown
        <i class="material-icons right">arrow_drop_down</i>
    </a>




    <div class="row">

        <div class="col s3">
            <a href="#!" class="btn dropdown-button" data-activates="dropdown2">Drop Menu
                <i class="material-icons right">arrow_drop_down</i>
            </a>
            <ul id="dropdown2" class="dropdown-content">
                <li>Home</li>
                <li>Map</li>
                <li>1. Prehuman</li>
                <li>2. Ancient</li>
                <li>3. Classical</li>
            </ul>

        </div>
        <div class="col s9">
            <div class="section hoverable z-depth-2">
                <h5 class="center-align">Section header</h5>
                <p class="flow-text"> AAAAAAAAAAAAAAAA BBBBBBBBBBBBBBBBBBBBBB CCCCCCCCCCCCCCCCCCC DDDDDDDDDDDDDDDDDDD</p>



                <img src="../images/pic.png" alt="" class="responsive-img">

                <div class="video-container">
                    <iframe src="../videos/vid.mp4" width="800" height="500" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>

    <!--JavaScript at end of body for optimized loading-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
    <script>
        M.AutoInit();
    </script>
</body>
</html>

实现：下拉按钮不会下拉

Materialize: Dropdown button doesn't drop down

html

materialize