Question

这是我的代码。 Materialize.showStaggeredList（）在按钮单击时不触发。当我尝试单击按钮时，我想要在浏览器窗口一侧注册链接，但按钮单击不会触发。我已经看过Materialise的文档并且相应地工作但是失败了。任何帮助

 <!doctype html>


<html lang="en">

<head>

    <style type="text/css">
    html
        {

            height: 100%;
            background: url(Images/234.jpg) no-repeat center center;
            background-size: cover;
        }

    </style>

    <title>HelpingO</title>
    <link rel="stylesheet" href="materialize/css/materialize.min.css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="materialize/css/materialize.css" />

    <script src="materialize/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>
    <nav style="background-color:#554253">

        <div class="navbar-wrapper">
            <a href="#" class="brand-logo col s2 left-align">
                 <img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" />
                HelpingO</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#">Contact</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
             <ul id="nav-mobile" class="side-nav">
        <li><a href="#">Home</a></li>

      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

        </div>
        <div class="navbar-wrapper col s3">
            <div class="col s12 m12 l12 right-align">
           <a href="#!" class="btn" onclick="materialize.showStaggeredList('#staggered-test')">Click Me</a> </div>
        </div>
    </nav>
    <ul id="staggered-test" class="right">
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large red"><i class="material-icons">email</i></a></li>
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large cyan"><i class="material-icons">web</i></a></li>
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large blue"><i class="material-icons">android</i></a></li>
    </ul>


    <div class="container">
    <div class="section no-pad-bot">
      <div class="container">
        <br><br>
        <h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
        <div class="row center">
          <h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
        </div>
        <div class="row center">
          <a href="#"  class="btn-large waves-effect waves-light teal dark-25">Get Started</a>
        </div>
        <br><br>
      </div>
  </div>
    </div>
    </body>
<html>

Answer 1

您似乎已按错误的顺序声明了脚本。 Materialize使用jQuery，因此需要先加载 -

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>

然后，为了让您的交错列表正常工作，您需要将materialize更改为Materialize（请注意大写字母“M”） -

<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a> </div>

完整（工作） -

<!doctype html>


<html lang="en">

<head>

  <style type="text/css">
    html {
      height: 100%;
      background: url(Images/234.jpg) no-repeat center center;
      background-size: cover;
    }
  </style>

  <title>HelpingO</title>
  <link rel="stylesheet" href="materialize/css/materialize.min.css" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>

</head>

<body>
  <nav style="background-color:#554253">

    <div class="navbar-wrapper">
      <a href="#" class="brand-logo col s2 left-align">
        <img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> HelpingO
      </a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Contact</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
      </ul>
      <ul id="nav-mobile" class="side-nav">
        <li><a href="#">Home</a></li>

      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

    </div>
    <div class="navbar-wrapper col s3">
      <div class="col s12 m12 l12 right-align">
        <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a> </div>
    </div>
  </nav>
  <ul id="staggered-test" class="right">
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large red"><i class="material-icons">email</i></a></li>
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large cyan"><i class="material-icons">web</i></a></li>
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large blue"><i class="material-icons">android</i></a></li>
  </ul>


  <div class="container">
    <div class="section no-pad-bot">
      <div class="container">
        <br><br>
        <h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
        <div class="row center">
          <h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
        </div>
        <div class="row center">
          <a href="#" class="btn-large waves-effect waves-light teal dark-25">Get Started</a>
        </div>
        <br><br>
      </div>
    </div>
  </div>
</body>
<html>

物化过渡不起作用

1 个答案: