进入侧面导航时，物化Css导航栏下拉菜单无法正常出现答案

【问题标题】：Materilazecss navbar dropdown not coming normally while coming in side nav进入侧面导航时，物化Css导航栏下拉菜单无法正常出现
【发布时间】：2017-01-19 23:45:19
【问题描述】：

我正在尝试按照他们网站上的建议放置 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>

【问题讨论】：

请提供帮助。非常感谢。

标签： navbar dropdown materialize

【解决方案1】：

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

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

【讨论】：

jQuery 和 materialize.js 都存在于 .. 上方，就在顶部的 css 下方。我注意到的另一件事是，当我删除“side-nav”类
嗨，刚刚制定了一个解决方案.. 两个触发器（侧导航和正常）的一个 id 下拉菜单不起作用。所以我为“side-nav”制作了一个副本下拉列表，id =“dropdown2”。工作和欢呼。 !