Question

在下面的简单文档中，单击时，两个下拉菜单都不会真正下拉。第一个是从Materialize网站复制粘贴的。我正在使用Linux上的Firefox进行查看。我已经移动了一些文件，这就是文件路径略有不同的原因，但是开发者控制台未显示任何错误（关于字符编码的事情未声明）。从Materialize网站到此实现的所有内容都已正确呈现，并且我检查了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>

实现：下拉按钮不会下拉

1 个答案: