物化转换不起作用

这是我的代码。 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>

来源

2017-02-24 Harneet Singh

看起来你已经声明你的脚本的顺序是错误的。 Materialise的使用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>

来源

2017-02-24 14:51:07

问题解决。谢谢 –

stagerred列表仍然不起作用 –

@HarneetSingh你在'Materialize.showStaggeredList'中使用了大写'M'吗？ –

物化转换不起作用

回答

相关问题