Question

我正在尝试按照他们网站上的建议放置materializecss导航栏。我已经放了一个下拉选项..这是不行的，虽然相同的代码工作，同时缩小到侧导航。我已经使用$（document）.ready（）按照建议随处可见......

我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://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"/>

    <title>This is index page with Decorator test</title>
    <style type="text/css">
        body{
            background-color:#f0f2de;
        }
        #top-wrapper-container{
            padding:0px 30px 0px 30px;
        }
        .page-flexbox-wrapper{
            background-color: white;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</head>


<body>
    <div id="top-wrapper-container">
        <div class="page-flexbox-wrapper">
            <header>

  <nav>
    <div class="nav-wrapper">
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <a href="#!" class="brand-logo">Logo</a>
      <!-- Search UI covering all
       <form>
        <div class="input-field">
          <i class="material-icons">close</i>
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
        </div>
      </form> -->

      <!-- 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>

     <ul class="right hide-on-med-and-down">
        <li><a href="#">Information</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Extra</a></li>
        <li><a class="dropdown-button" data-beloworigin="true" href="#" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="#">Information</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Extra</a></li>
        <li><a class="dropdown-button" href="#" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>

      </ul>
    </div>
  </nav>    






            </header>
            <main>
                <div id="content-container">

   <h2>This is the actual page content</h2>

    </h2>

                </div>        
            </main>
            <style type="text/css">
  .page-flexbox-wrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

</style>
    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2014 Copyright Text
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>


        </div>
    </div>

   <!--Import jQuery before materialize.js-->
    <script type="text/javascript">
    $(document).ready(function(){
        $(".button-collapse").sideNav();
        if ($(".dropdown-button").attr("class").indexOf("active") !== -1)(
            $("ul#dropdown1").show()        
        )
        $(".dropdown-button").dropdown();       
    }); 
    </script>
</body>
</html>

Answer 1

您尚未在文件中添加jQuery和materialize.js。在文件中添加jquery和materialize。

<强> JS

<script type="text/javascript" src="ADD LINK TO jQuery"></script>
<script type="text/javascript" src="ADD LINK TO materialize.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $(".button-collapse").sideNav();
        if ($(".dropdown-button").attr("class").indexOf("active") !== -1)(
            $("ul#dropdown1").show()        
        )
        $(".dropdown-button").dropdown();       
    }); 
</script>

在进入侧导航时，Materilazecss导航栏下拉列表未正常进入

1 个答案: